I use jquery datatables with serverside processing. It works fine til press pagination battons. When user press pagination button fnServerData call with oSettings argument with no sType parametr!
for example call fnServerData after Next button:
The same call after some filter button:
Is it a datatables bug or what? how can i fix it?
UPD: my datatables initialization
var table = $("#table_id").DataTable(
{
"order": [[0, "desc"]],
"sAjaxSource": "/odata/Messages",
"iODataVersion": 4,
"aoColumns": [
{ mData: "Id", sType: "numeric" },
...
],
"fnServerData": fnServerOData,
"bServerSide": true,
"bUseODataViaJSONP": false,
"processing": true,
"lengthMenu": [[10, 100, 1000], [10, 100, 1000]]
});
As said by #Rory McCrossan over Here,
With the latest version of DataTables, you need to set the type property of the object you provide in the columnDefs array, like this:
$('#example').dataTable({
"columnDefs": [
{ "type": "num" }
]
});
Note that there are many other methods of sorting which can be found in the documentation
For more info : stype-numeric-doesnt-seem-to-work-anymore (Datatable official)
Related
var table = $('#canidateregtable').DataTable();
table.destroy();
$('#canidateregtable').DataTable( {
serverSide: true,
"ajax": {
"url" : "getdata",
"dataSrc" : "",
},
});
This is my datatable and some column like
"columns": [
{"data": "user_id",}
]
Why this error can anyone help me and this is in live in server
Setting attribute of Datatable differs from version of datatable js you are using.
If you are using Datatable version of greater than 1.10.0 use below syntax.
$('#canidateregtable').DataTable({
"sAjaxSource": "/GetData", // Your url
"bServerSide": true,
"bSearchable": true,
"order": [[1, 'asc']],
"columns": [
// You can mention here all your columns you want to display
{
"data": "Name",
}
]
});
}
I have a DataTable and I would like to display data over several pages. I would like pages with 100 elements on each. In addition I would like to have some of my columns sortable.
In my Database I have more than 100 elements and my DataTable is only showing the first 100...
I've noticed some things :
1) When I put "bServerSide": false my columns are sortable BUT my number of rows is limited to 100 (one page with 100 elements).
2) When I put "bServerSide": true my number of rows is now correct (several pages with 100 elements on each) BUT my columns are not sortable anymore (I mean the sort function doesn't work when I click on the sort button).
$('#tableSupervisionElecteur').DataTable({
"bLengthChange" : false,
"bFilter" : false,
"bProcessing": false,
"searching": false,
"ordering": true,
"order": [[1, 'asc']],
"bStateSave": false,
"pageLength": 100,
"iDisplayStart": 0,
"bServerSide": true,
"initComplete": function(settings, json) {
},
"fnDrawCallback": function () {
},
"sAjaxSource": "sourcesDataTables",
"aoColumns": [
...
],
columnDefs: [
{
orderable: false,
targets: 0
},
{
orderable: false,
targets: 7
},
{
orderable: false,
targets: 8
},
]
});
I would like to have BOTH features working together (sorting and displaying) and not one or the other.
Furthermore my DataTable needs to be able to handle approximately 30 000 rows.
Remove orderable: false for the columns which you need ordering and also specify the order(asc or desc) in "order" option
Its depending on your server side, as order is processed on server. Server must check if any request for asc or desc and build your database query, each column field sorted base on that.
I'm using jQuery DataTables v1.10.
At our new website we have a dataset with more than 10000 records.
The displayLength is set by default at 50 records.
After initializing the DataTable, 50 of 10000+ records are showing, but there's only 1 pagination item visible and a forward and backward arrow which are both disabled.
When I'm changing the displayLength to 100, I get one page with 100 records out of 10000+, but still one page instead of more than 100 pages.
This is our initialisation:
"oLanguage": oDatatablesNL,
"sDom": '<"dt-toolbar clearfix"fpl>rt<"row-actions"><"dt-toolbar bottom clearfix"p>',
"processing": true,
"serverSide": true,
"ajax": "/?async=yes&get=datatable,
"ordering": true,
"order": [[ 4, "asc" ]],
"paging": true,
"pagingType": "full_numbers",
"displayStart": 0,
"lengthMenu": [[50, 100, 500], [50, 100, 500]],
"lengthChange": true,
"searching": true,
//"deferRender": true,
"columns":
[
{
"data": "firstColumn",
"class": "first"
},
{
"data": "secondColumn",
"class": "second"
},
],
"createdRow": function( row, data, dataIndex ) {
dtUpdateData(row, data, dataIndex);
},
"initComplete": function() {
dtExtras(dtLengths);
}
And our serverside data:
{"draw":1,"recordsTotal":"15827","recordsFiltered":"50","data":[{'column1':'test','column2':'test2'}]
The problem seemed to be that recordsFiltered should be the number of records which were filtered by the query. I've searched for the answer during more than 2 hours; feeling really dumb now... ;)
I am trying to use the datatable column chooser as shown in Datatable Colvis as shown below
$('#tableId').dataTable({
"sDom": 'C<"clear">lfrtip',
"oColVis": {
"aiExclude": [ 0,15 ]
},
"aaSorting": [],
"aaData":[],
"aoColumns": [],
"bScrollInfinite": true,
"sScrollY": "280px",
"sScrollX": "963px",
"bDestroy":true,
"iDisplayLength" : 10,
"fnInitComplete": function() {
// custom scroll bars
//$('#tableId').find('.dataTables_scrollBody').jScrollPane();
},
});
I have added 16 columns which I cant show up in the code here.
But the column chooser doesn't show up on the UI. Any mistake am doing here?
Sorry I had not added ColVis plugin JS to application, so it was not working. Thanks for your response.
I am using Datatables 1.9 version
var oTable = $('#example').dataTable( {
"oLanguage": {"sSearch": "Search all columns:",
"sLengthMenu": "Display <select><option value='100'>100</option><option value='200'>200</option></select> records per page"
},
"sPaginationType": "full_numbers",
"bAutoWidth": false,
"iDisplayStart": 0,
"iDisplayLength": 2000,
"bFilter": true,
"bInfo": true,
"bSort": true,
"sScrollX": "100%",
"sScrollY": "500px",
"bScrollCollapse": true,
"bPaginate": true,
"bSortClasses": true,
"bLengthChange": true,
"bProcessing": true,
"bDestroy": true,
"bServerSide": true,
"bDeferRender": true,
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "form_data", "value": data } );
},
"sAjaxSource": "search.py",
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": function (json)
{
fnCallback(json);
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
document.getElementById("bottom").focus();
},
"error": function (xhr, error, thrown) {
alert("An Error Occurred.!");
}
});
The issue is that when I run the search and datatables renders "Processing ..." text the "Show .. Search" and first next previous and last button also gets displayed. Is there a way that I defer there display when datatabales has processed or received response from backend.
You should include "bPaginate": false, into the configuration object you pass to your constructor parameters.
As seen here.
as it is data table
I didn't understand your question completly. If you want to hide those controlls you may try this..
Datatables comes with controls for filtering and pagination. These can be shown and hidden in a couple of ways (all examples in coffeescript):
Way 1
$("#myTable").dataTable
"bPaginate": false, #hide pagination control
"bFilter": false #hide filter control
Way 2: Use the "sDom" prop
$("#myTable").dataTable
"aaData": data
"sDom": 'ft'
Here 'f' means filter and 't' means table, so only show those. Order matters: 'ft' puts
the filter on top, whereas 'tf' will put it on bottom.
For more complex and other widgets, see Ref
Ref: http://datatables.net/usage/options#sDom
I got the answer from this link : https://gist.github.com/1568446
//Hide DataTables Length
<style>.dataTables_length {
display: none;
}
</style> //Hide Pagination
<style>.pagination {
display: none;
}
</style> //Hide DataTables Info
<style>.dataTables_info {
display: none;
}
</style>
This will work,but i am not recommending this
Note that this answer is consistent with version DataTables 1.13.1
This is all set with the arguments object given to initialize the table
const myTable = $('#example').dataTable( args );
To avoid Next / Previous / First / Last buttons on pagination:
const args = {pagingType: "numbers"};
Find here the 6 choices available for pagingType property
To show/hide the searching box:
const args = {searching: true/false};
I hope this helps