Server-Side Ajax Index Column

applefan

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});

});

allan

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 for draw since that will be triggered for every display action when using server-side processing.

Allan

applefan

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?

allan

How did you add it. Did you get the start property from the returned object and offset your index count by it?

Allan

applefan

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

allan

I don't see page.info() being used there?

applefan

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?

tangerine

Have you checked the values of info and info.page ? (alert or console.log)

applefan

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.

tangerine

alert(...) or console.log(...)

applefan

No I dont see alert or console.log in my Script

kthorngren

Under this line:

var info = t.page.info();

Put either

console.log("info: " + info + "\ninfo.page: " + info.page + "\ninfo.pages: " + info.pages);

or

alert("info: " + info + "\ninfo.page: " + info.page + "\ninfo.pages: " + info.pages);

Kevin