Hey, i'm currently building a testautomation system with django. now i want to switch to datatables because it is much easier to handle the data. i'm using jquery-1.7.2 at the moment. I have implemented the example, just to see if it works. And then theres the first error "Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The new child element is null."
In the manual it says, that datatables is compatible with my version of jquery. So where is my mistake?
thanks in advance
Hi there
I've been using Datatables 1.9.x with jeditable and was quite happy with it. Since i wanted to upgrade to 1.10 now i'm missing the examples for editing rows in the API section - is there a reason that the example was removed or do you have suggestions how to do a proper upgrade? jeditable seems to be a little bit outdated - are there any alternatives except buying the "editor"? Otherwise i've to talk to my client if he wants to do an upgrade an support this great project.
Thanks a lot and keep on rocking!
Best Andy
Every one of the extensions I attempt to enable are generating the same error:
TypeError: $.fn.dataTable.ColVis is not a constructor
or
TypeError: $.fn.dataTable.FixedHeader is not a constructor
etc.
I've tried initializing the DataTable with a lowercase 'd' and uppercase 'D', but either way I get an error. I've tried placing the initializer inside the $(document).Ready and outside. Some of the extensions are super cool and would be a big benefit to our tables.
$(document).ready(function () {
var table = $('#jsonajaxtable').DataTable({
"dom": 'C<"clear">lfrtip',
[... omitted for brevity ...]
});
new $.fn.dataTable.FixedHeader(table);
var colvis = new $.fn.dataTable.ColVis(table);
$(colvis.button()).insertAfter('div.info');
I've seen examples showing the dom option in quotes and without quotes. I see examples using dataTable and DataTable. I don't understand what <"clear"> in the dom option means and I can't find where the dom option is even documented.
Can someone help me out by telling me where I'm going wrong on getting any of the extensions to work? :S
Hi,
I am using 1.9.4
I have added extra parameter on the JSON result during server side processing (e.g. otherData). Tried with fnCreatedRow but I am only able to see the aData. How can I access other property from JSON result on the Datatables callbacks ?
Thank you.
Hi,
I am trying to use ColVis, but my table headers are a bit complex, they have some href, some input and a checkbox... I would like to hook on ColVis and tell it for each column which is the title (it is the text of the link). I saw legend function, but that doesn't seem to help me.
Any idea?
Thanks in advance,
After hiding a column.. or instead of hiding the column how do you replace repetitious data with an symbol such as "-"
HAVE A PROBLEM WHEN WE PAINT THE ENTIRE ROW USING FIXED COLUMN
tbaProductosAsignados = $('#tbaProductosAsignados').dataTable({ bServerSide: true, sAjaxSource: frmRegistrarDinamica + "ListarProductosDinamicaContable", bProcessing: true, sPaginationType: "full_numbers", sScrollY: "290px", sScrollX: "1500px", sScrollXInner: "150%", bFilter: false, bSort: true, bSortCellsTop: true, fnDrawCallback: function(oSettings) {}, oLanguage: { "sEmptyTable": "Ningun producto asociado a la dinámica contable.", }, .... }
new $.fn.dataTable.FixedColumns(tbaProductosAsignados, { leftColumns: 0, rightColumns: 1 });
$(tbaProductosAsignados + ' tbody').on('click', 'tr', function() { if ($(this).hasClass('row_selected')) { //$(this).removeClass('row_selected'); } else { var odtableAyu = $(tabla).dataTable(); odtableAyu.$('tr.row_selected').removeClass('row_selected'); $(this).addClass('row_selected'); } });
DOES NOT PAINT THE ENTIRE ROW, i.e. DOES NOT PAINT THE FIXED ROW :(
I color my table row based on its values. So using fnRowCallback i accomplish this.
but its not called when i go to next page or when i reload page. Then i find a problem in fnDRAW when there is new page its not called.
So append after this code in file jquery.dataTables.js
oSettings.nTBody.appendChild( nAddFrag );
if ( nBodyPar !== null )
{
nBodyPar.appendChild( oSettings.nTBody );
}
=== with this.
for ( i=0, iLen=anRows.length ; i<iLen ; i++ )
{
_fnCallbackFire( oSettings, 'aoRowCallback', null,
[anRows[i], oSettings.aoData[ oSettings.aiDisplay[i] ]._aData, i, i] );
}
Let me know if anyone have the problem. Enjoy.
Hello, I am new to datatables and I need help. I am using datatable currency sorting in my asp.net project. I am trying to sort a column having data of currency. The data is displayed using <asp:label ID= "xyz " runat="server"><%#Eval("VariableName",{0:c0}") %> I have written this code inside <asp:repeater...> <ItemTemplate> <asp:label ID= "xyz " runat="server"><%#Eval("Variablename",{0:c0}") %>
I am displaying the values in the table. If I use this code, sorting is not working. It works when I remove <asp:label ID= "xyz " runat="server">. I can not remove this snippet as I am using this label somewhere on the same page. I trying to use currency sorting plugin and then in pageLoad method, I used "aoColumns" : {'sType' : 'currency' }. But I can't get it worked. Kindly help me to find it out. I got stuck in it.
Thanks.
I have table where the first row should contain textbox in all cells and I obviusely want this row to be ignored from sorting.
What event can I capture after the .load() is complete? I need to style every row for a certain column based on the content.
I do need to use .load() as I am passing in dynamic data to the url that is only determined at page load time
Thoughts?
Thanks!
I'm trying to add new html rows to data table when a user select one o more rows in other datatable and get the rows checked in second table to save it in database. The first time I can get it without problems, but if a select N rows in first table and added to second table, after select another N rows from first table and add these to second table, when I try to get the new resultset, only can get the first rows added to the second table.
The new N records not appear in the result string from table.serialize
I'm glad if any can help me. My code is:
//This is when the user select one o more rows in first table $("#btnAddUser").click(function () { var oTableX = $('#divTblSeaEmpList').dataTable(); sEmpsToAdd = oTableX.$('input').serialize(); if (sEmpsToAdd.length == 0) { alert("\n - Selecciona al(los) empleado(s) que deseas agregar a la lista de participantes."); } else { var cont = -1; $("#divTblSeaEmpList input:checkbox").each(function () { if ($(this).attr('id') != "chkAllSeaEmps" && $(this).is(':checked')) { var iEmpPk = $(this).attr('id'); var iJobPk = $(this).val(); var bUsrExists = false; $("#divTblEmpList input:checkbox").each(function () { var iUsr = $(this); if (iUsr.attr('id') == "Rchk" + iEmpPk) { bUsrExists = true; false; } });
if (!bUsrExists) {
$("#divTblEmpList tbody").append("<tr>" +
"<td class='chex-table'><input type='checkbox' checked='checked' onClick=UncheckAllRow(" + iEmpPk + "); name='Rchk" + iEmpPk + "' class='mc' value='" + iJobPk + "' id='Rchk" + iEmpPk + "'><label for='" + cont + "'></label></td>" +
"<td>" + $("#lblSap" + cont).html() + "</td>" +
"<td>" + $("#lblEmp" + cont).html() + "</td>" +
"<td class='chex-table'><input type='checkbox' onClick=ValidateMainCheck(" + iEmpPk + "); name='cho" + iEmpPk + "' class='mc' value='" + iJobPk + "' id='cho" + iEmpPk + "'><label for='" + cont + "'></label></td>" +
"<td class='chex-table'><input type='checkbox' onClick=ValidateMainCheck(" + iEmpPk + "); name='ctt" + iEmpPk + "' class='mc' value='" + iJobPk + "' id='ctt" + iEmpPk + "'><label for='" + cont + "'></label></td>" +
"</tr>");
}
}
cont++;
});
}
oTableX.fnDestroy();
$("#divTblSeaEmpList tr:gt(0)").remove();
});
//This is when I try to get all rows added to second table $("#btnGetUsersAdded").click(function () { var oSecTable = $('#divTblEmpList').dataTable(); sEmpsSelected = oSecTable.$('input').serialize(); });
Thanks for your help
Please bear with me, I am new to Datatables. I'm using returning Datatables from my stored proc in C#. My data returns as
The results I am trying to achieve is this, with the indented shown after all expanded
COLLAPSED version
EXPANDED version
I have looked at this page https://jquery-datatables-row-grouping.googlecode.com/svn/trunk/collapsibleGroups.html and tried but it's not working
JScript I am using :
$(document).ready( function () { $(document).ready( function () { $('#example').dataTable({ "bLengthChange": false, "bPaginate": false}) .rowGrouping({bExpandableGrouping: true}); } ); }
HTML C# .aspx:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Customer</th>
<th>CountStatus</th>
</tr>
</thead>
<tbody>
<asp:Literal runat="server" ID="ltData"></asp:Literal>
</tbody>
</table>
C# code behind:
private void loadGrid() { StringBuilder sb = new StringBuilder();
DataTable dt = new DataTable();
string connstr = "Data Source=localhost;Initial Catalog=Datatable1;User ID=11;Password=xxx;Connection Timeout=20";
using (SqlConnection conn = new SqlConnection(connstr))
{
SqlCommand sqlComm = new SqlCommand("reportStoredProc", conn);
sqlComm.CommandType = CommandType.StoredProcedure;
SqlDataAdapter da = new SqlDataAdapter();
da.SelectCommand = sqlComm;
da.Fill(dt);
}
if (dt != null)
if (dt.Rows.Count > 0)
foreach (DataRow dr in dt.Rows)
{
sb.Append("<tr>");
sb.Append("<td>");
sb.Append("<data=null class='details-control' />");
sb.Append("</td>");
sb.Append("<td>");
sb.Append((dr["Customer"]));
sb.Append("</td>");
sb.Append("<td>");
sb.Append((dr["CountStatus"]));
sb.Append("</td>");
sb.Append("</tr>");
}
ltData.Text = sb.ToString();
}
Hello, I have table with data from DB (I am not using ajax or something like that, rows are on the same page). But in MySQL table I have 404 rows, and table shows only 357. SQL query is just fine, because when I turn off datatable, normal table on page shows me correct number of rows. When I look on HTML code of page there is also correct number of rows (I know it, because datatable doesn't show about 10 first ten rows and other rows somewhere in the table, i don't know where)
I don't know why is this happening, I do not turning on datatable with any special setting, just like this:
$('#table').dataTable( {
"pageLength": 25,
"language": {
"url": "js/Czech.json"
}
} );
} );
I can't send link because datatable is in internal company system, but i can provide debug link: http://debug.datatables.net/iciquz
Thanks for any help, and sorry for my bad english.
Hi,
I have the following code:
$(document).ready(function() { $('#services').dataTable( { "ajax": { "url": "/wm-actional-db-mon/NumberOfNodesJSON?environment=<%=request.getParameter("environment")%>&numberOfInstances=<%=request.getParameter("numberOfInstances")%>" } } ); } );How can I sort the result desc on column 4.
Looked at the sample that shows: $('#example').dataTable( { "order": [[ 3, "desc" ]] } );
Any help is will be much appreciated.
Hi, Unfortunately, after browsing through the documentation, I did not see anything regarding to customizing the number of pages displayed in the pagination.
By default, datatables' pagination is hard to use when there are 1000+ pages (10 rows per page/not negotiable :P ) as going from page 1 to page 500 will take you 499 clicks in the [Next] button.
In initial load the pagination would be displayed as (First,Previous,[1],2,3,4,5,...1000,Next,Last)
If were to go to page 500, I would click page [5], and the result would be: (First,Previous,1..4,[5],6...1000,Next,Last)
And from here it will be a painfully repeating of clicking the Next button until page 500.
So my question would be, it possible to behave like this? (First,Previous,[1],2,3,4,5,6,7,8,9,10,Next,Last) then clicking page 7 will result to this: (First,Previous,3,4,5,6,[7],8,9,10,11,Next,Last)
Or better yet: (First, Previous 10 ,[1],2,3,4,5,6,7,8,9,10, Next 10 ,Last) Click Next 10 will be: (First, Previous 10 ,[11],12,13,14,15,16,17,18,19,20, Next 10 ,Last)
Hopefully there is a solution that pure uses paging numbers (no dropdowns to select page number/no textbox to manually input desired page). As we are using datatables to replace the asp:datagrid(See http://www.4guysfromrolla.com/demos/dgExample33.aspx to check how asp:datagrid pagination works.
Text-based filtering couldn't be easier with the new API.
A simple invocation of the following chain filters a particular column:
table.column(i).search('term').draw()
Is it possible to apply a custom filter function in this way? Ideally, something along the lines of:
table.column(i).filter(function (value, index) {
// evaluate and return true or false
}).draw();
I realize that there exists a filter() helper function that consumes an evaluator function, but I'm looking for some way to actively filter the table, not just the raw data.
i am using Datatable1.9.4 version
Thanks inadvance JordanB
Hi
I am attempting to use the Datatables editor in a MVC application. I have an existing basic client side table working with Datatables. Then I have added the various JS files needed for the editor ( jquery.dataTables.min, dataTables.tableTools.min.js and dataTables.editor.js) and they are shown in the sources in the Chrome developer tools
I get an error when the first page of my application loads -even before I have loaded a datatable - Uncaught TypeError: undefined is not a function in dataTables.editor.js:48 (I tried using the unminified version of the file)
Any suggestions or pointers to fixing this would be much appreciated
Thanks
I'm interested in using the HTML5 data attrs to implement some custom sorting, but my sort requirements are kind of complex. The grid has two text columns then a bunch of numeric (percentages for the sake of discussion). Key requirements when sorting by a numeric column: 1) always secondarily sort by the name column (one of the text columns) 2) If a row contains "N/A" rather than a percentage, ALWAYS sort that to the bottom regardless of asc/desc 3) There can be a row or two that define averages, and those rows must always be at the top, again regardless of asc/desc.
It does not appear that I could render a data-order attribute in such a way that it would always sort top or bottom, correct? So, I gather that means I need to write my own custom sort code, and the jquery.fn.dataTableExt.oSort approach won't work as it only compares the values from a single column, whereas I would need to check multple column values.
Anyone able to point me up the right tree?