Server-Side Ajax Index Column
Server-Side Ajax Index Column
applefan
Posts: 12Questions: 2Answers: 0
Hey, I have a Datatable and I used it with Index Column and everything worked perfect. But than I added Server Side and the Index Column doesn't work anymore. Can anyone help me?
This is my Debug Link: http://debug.datatables.net/ujixil
$(document).ready(function() {
// Add custom class to pagination div
$.fn.dataTableExt.oStdClasses.sPaging = 'dataTables_paginate paging_bootstrap paging_custombootstrap ';
var t = $('#myTable').DataTable( {
"sDom":
"R<'row'<'col-md-8'l><'col-md-4'f>r>"+
"t"+
"<'row'<'col-md-4 sm-center'i><'col-md-4 text-right sm-center'p>>",
"oLanguage": {
"sSearch": ""
},
"fnInitComplete": function(oSettings, json) {
$('.dataTables_filter input').attr("placeholder", "Suche...");
},
"pagingType": "full_numbers",
"columnDefs": [ { "type": "numeric-comma", targets: 6 } ],
"processing": true,
"serverSide": true,
"ajax":{
url :"employee-grid-data.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".employee-grid-error").html("");
$("#myTable").append('<tbody class="employee-grid-error"><tr><th colspan="3">Keine Einträge auf dem Server gefunden!</th></tr></tbody>');
$("#myTable_processing").css("display","none");
}
},
"fnDrawCallback": function(oSettings) {
$('.mysparkline').sparkline('html', {
type: 'bar',
tagValuesAttribute: 'linevalues',
barWidth: 4,
height: 20,
barColor: '#ffffff',
width: 'auto',
tooltipFormatter: function(sp, options, fields) {
return '<div class="jqsfield"><span style="color: ' + fields[0].color + '"></span>' + fields[0].value + '</div>'
}
});
},
"paging": true,
"info": true,
"columnDefs": [{ "searchable": false, "targets": [0, 4, 7, 8] }, { "orderable": false, "targets": [0, 4, 7, 8] } ],
"order": [[ 3, 'desc' ]],
});
t.on( 'order.dt search.dt', function () {
t.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
cell.innerHTML = i+1;
} );
}).draw();
//initialize chosen
$('.dataTables_length select').chosen({disable_search_threshold: 10});
});
This discussion has been closed.
Answers
You'd need to offset the index column by the current page start. You can get that information from the
page.info()method. Also, rather than listening for the two events you currently do, just listen fordrawsince that will be triggered for every display action when using server-side processing.Allan
Hey Allan, thanks for your fast reply. I addet page.info() to my page but nothing happens. The Index Column is always the same when I go to next page. What is the Problem?
How did you add it. Did you get the
startproperty from the returned object and offset your index count by it?Allan
I just added
"page": 0,
"pages": 1000,
"start": 1,
"end": 1000,
"length": 10,
"recordsTotal": 10000,
"recordsDisplay": 10,
between var t = $('#myTable').DataTable( { ... }
but nothing happend
I don't see
page.info()being used there?Now I have this in Ajax:
"processing": true,
"page": 0,
"pages": 1000,
"start": 1,
"end": 1000,
"length": 10,
"recordsTotal": 10000,
"recordsDisplay": 10,
"serverSide": true,
"ajax":{
url :"employee-grid-data.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$(".employee-grid-error").html("");
$("#myTable").append('<tbody class="employee-grid-error"><tr><th colspan="3">Keine Einträge auf dem Server gefunden!</th></tr></tbody>');
$("#myTable_processing").css("display","none");
and I have this under the table "var t = $('#myTable').DataTable( {" :
var info = t.page.info();
$('#tableInfo').html(
'Currently showing page '+(info.page+1)+' of '+info.pages+' pages.'
);
But nothing happens. By changing the Site with the pagination buttons, the column index always start from 1 to 10.
What should I do?
Have you checked the values of info and info.page ? (alert or console.log)
How Can I check the values of info and info.page?
Sorry but I am a newbie in Datatables, I dont know Javascript very well.
alert(...) or console.log(...)
No I dont see alert or console.log in my Script
Under this line:
Put either
or
Kevin