jQuery DataTables - 显示条目菜单和过滤不起作用

Question

我在 JSP 文件中创建了表，它显示所有记录而没有过滤和“显示 10 个条目”计数。我的代码如下所示。

当我搜索其他答案时，解决方案是设置iDisplayLength。但这对我不起作用。

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>

<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<script type="text/javascript">
function searchfiles() {

    $('#fileLoader').DataTable({
        "bProcesing" : true,
        "bServerSide" : true,
        "iDisplayLength" : 10,
        destroy: true,  //reinitializing of the data table
        "aoColumns" : [ {
            "sTitle" : "Rate Files",
            "mData" : "filePath",
        } ],
        "columnDefs": [ {
            "targets": 0,
            "data": "download_link",
            "render": function ( data, type, full, meta ) {
              return '<a href="'+data+'">'+data.split('.pdf')[0]+'</a>';
            }
          } ],
        "fnServerData" : function(sSource, aoData, fnCallback) {
            aoData.push({
                "name" : "hotel",
                "value" : $("#hotel").val()
            });
            aoData.push({
                "name" : "season",
                "value" : $("#season").val()
            });
            aoData.push({
                "name" : "market",
                "value" : $("#market").val()
            });
            aoData.push({
                "name" : "sheetDate",
                "value" : $("#sheet_date").val()
            });
            $.ajax({
                "type" : "POST",
                "url" : "searchfiles",
                "data" : aoData,
                "success" : fnCallback
            });
        },
    });
}
</script>


<table id="fileLoader" width="100%">
        <thead>
            <tr>
                <th>Rate Files</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

Answer 1

原因

您使用"bServerSide": true 启用了服务器端处理。在这种模式下，搜索、过滤和分页应该在服务器端完成。

很可能您的服务器端脚本 (searchfiles) 没有被编程为这样做，这就是您看不到排序/过滤/分页工作的原因。

使用bServerSide: false 或省略您仍然可以通过Ajax 从服务器获取数据，但搜索/过滤和分页将由客户端的jQuery DataTables 执行。

有关处理模式的更多信息，请参阅manual。

解决方案

删除 "bServerSide": true 以启用客户端处理。