Question

总共有11条记录，但该表只显示了10条记录。它还显示＆＃34;显示10个条目中的1到10个＆＃34;，但是有11个条目。＆＃34;下一个按钮＆＃34;也行不通。这有什么不对？请帮忙。同时启用服务器端会导致aData is undefined错误奇怪的是，如果注释掉＆＃34; bServerSide＆＃34;：true＆＃34;，它工作正常，我的表格很好地显示在HTML中，但不是所有记录。

根据格式，从服务器返回的JSON对象看起来很好。它有aaData（为简单起见，我已减少了aaData

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

这是我的代码：

<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>

与服务器端注释，它工作正常;如下所示（但只显示10条记录） enter image description here

使用服务器端注释，没有加载数据（我在控制台中得到上面描述的错误）。 enter image description here

Answer 1

    $("#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
});

=============================================== ======================
使用上面的方法初始化表。将bPaginate标志设置为true将启用数据表中的下一个按钮，以便您能够查看丢失的第11条记录.. :)

Answer 2

我在django项目中使用过这个。这是我的代码。试试这是否有效

<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>

jquery-datatable没有显示所有条目和服务器端ajax不工作？

2 个答案: