jquery-datatable not showing all entries and serverside ajax not working?

Question

In total, I have 11 records, but the table is showing only 10 entries. It also displays "Showing 1 to 10 of 10 entries", but there are 11 entries. The "next button" also does not work. what is wrong here? Please help. Also enabling serverside leads to aData is undefined error Strangely, if comment-out "bServerSide": true", it works fine and my table is displayed nicely in HTML but not all records.

The JSON object returned from server seems fine as per the format. it has aaData ( I have reduced aaData below for simplicity)

{ "iTotalRecords": 11, "aaData": [[ .....], [....]], "sEcho": 0, "iTotalDisplayRecords": 11}

Here is my code:

<script type="text/javascript">
$(document).ready(function() {
var oTable = $('#search_table').dataTable( {
        "sDom": 'T<"clear">lrtip',
        "bProcessing": true,
        //"bServerSide": true,
        "sAjaxSource": "{% url 'search_list_json' %}",
        "aaSorting": [ [2,'asc'], [1,'desc'] ],
        // Disable sorting for the Actions column.
        "aoColumnDefs": [ { "bSortable": false, "aTargets": [ 0,4 ] } ],
        "iDisplayLength":50
    } );
} );
</script>

HTML:

<div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-12">
        <div class="well">
          <table id="search_table">
            <thead>
              <th width="15%">
                <center>Title</center>
              </th>
              <th width="10%">Date Created</th>
              <th width="10%">Min Price</th>
              <th width="10%">Max Price</th>
              <th width="10%"></th>
            </thead>
            <tbody></tbody>
          </table>
          <br>
        </div>
      </div>
    </div>
  </div>

with sever-side commented out, it works fine; shown below (but displaying only 10 records)

with server-side commented-in, no data is loaded (I get error described above in console).

Answer 1

I have used this in my django project. Here is my code. Try if this works

<script src="{% static "js/scripts.js" %}"></script>
<script type="text/javascript">
$(document).ready(function() {
var oTable = $('#search_table').dataTable( {
        "sDom": 'T<"clear">lrtip',
        "oTableTools": {
            "sSwfPath": "{% static 'extras/copy_csv_xls_pdf.swf' %}",
            "aButtons": [ "csv", "pdf", "print" ],
        },
        "bProcessing": true,
        "bServerSide": true,
        "bStateSave": true,
        "sAjaxSource": "{% url 'search_list_json' %}",
        // Disable sorting for the Actions column.
        "aaSorting": [ [1,"desc" ]],
        //'aLengthMenu':[[35,'-1'],['Paged','All']],
        "iDisplayLength":10,
        "sPaginationType": "full_numbers",
        //"sPaginationType": "bs_full",
        "oLanguage": {
            "oPaginate":{
                "sFirst":'<<',
                "sLast": '>>',
                "sNext": '>',
                "sPrevious": '<'
                },

            "sInfo":'{{ "Showing _START_ to _END_ of _TOTAL_ entries" }}',
            "sZeroRecords": "No data to show"
            },
            "aoColumns": [
            { "sClass": "center","bSortable": false  },
            { "sClass": "center","bSortable": true },
            { "sClass": "center","bSortable": true },
            { "sClass": "center","bSortable": true },
            { "sClass": "center","bSortable": false}
        ]
    } );
} );
</script> 

Answer 2

    $("#tableId").dataTable({
    "bPaginate": true,
    "bJQueryUI" : true,
    "sPaginationType" : "full_numbers",
    "oLanguage" : {
        "sInfo" : "Showing _START_ to _END_ of _TOTAL_ items",
        "sInfoEmpty" : "Showing 0 to 0 of 0 items",
        "sInfoFiltered" : " - filtering from _MAX_ items",
        "sEmptyTable" : "No Rules available"
    },      
    "bSort" : false,
    "bFilter" : false,
    "iDisplayLength": 50
});

=====================================================================
Use the above method to initialize the table. Setting the bPaginate flag to true will enable the next button in the datatable, so that you will be able to view your missing 11th record.. :)