DataTables 服务器端和 Slim 框架答案

【问题标题】：DataTables Server side and Slim FrameworkDataTables 服务器端和 Slim 框架
【发布时间】：2015-08-25 13:37:17
【问题描述】：

我一直在研究数据表服务器端处理和 slim 框架，但我的浏览器中总是出现此错误：

当我检查 chrome 开发者工具时，我在控制台中看到了这个：

加载资源失败：服务器响应状态为 404（未找到） http://localhost:8000/user/ssp-data.php?draw=1&columns%5B0%5D%5Bdata%5D=0&c…art=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1440509303609

我的html代码在这里：

<table id="dataTableUsers" class="table table-striped table-bordered" cellspacing="0" width="100%">
     <thead>
          <tr>
              <th>ID</th>
              <th>Nickname</th>
              <th>Email</th>
          </tr>
     </thead>

     <tfoot>
          <tr>
             <th>ID</th>
             <th>Nickname</th>
             <th>Email</th>
          </tr>
    </tfoot>                      
</table>

我的脚本：

$(document).ready(function() {
    $('#dataTableUsers').dataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "ssp-data.php"
    } );
} );

ssp.data.php http://pastebin.com/iBnWgAHd

我成功使用了数据表，但没有使用服务器端处理。它加载 1000+ 行大约 5 秒，我不希望我的客户每次都这样等待。我尝试搜索并发现数据表服务器端处理可能会有所帮助。我的代码做错了什么？提前谢谢你。

【问题讨论】：

为了 100% 清楚，您可以确认您的 Web 服务器可以找到并提供 http://localhost:8000/user/ssp-data.php（没有查询字符串），对吧？
@HPierce，我想它需要一个路由器，因为我使用的是超薄框架？
我不知道这是否是最好的方法，但如果你能找到一种方法将所有参数传递给脚本，那肯定会奏效。
试试@HPierce先生
您可以在定义路线后include "ssp-data.php";。如果它适合你，我会发布它作为答案。

标签： php jquery datatables slim

【解决方案1】：

使用 slims Framework 3，你需要有 2 个路由，第一个：

$app->get('/datatable-example',function(){
    ... // your html code goes here
});

用于呈现 HTML 页面，“/datatable-example”可以更改为您想要的任何内容。第二条路线：

$app->get('/datatable-data',function(){
   ... // your server-side handler goes here
});

用于返回数据。 'datatable-data'可以更改，但必须与下面的JS代码保持一致：

$(document).ready(function() {
   $('#dataTableUsers').dataTable( {
       "processing": true,
       "serverSide": true,
       "ajax": "datatable-data"
   });
});

注意“ajax”的值也是“datatable-data”，和第二条路由一样。

我将复制下面的整个示例，但它有点肮脏和hacky，但是当你复制到你的路由文件时它应该可以工作：

$app->get('/datatable-example',function(){
    return 
    '
        <head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script></head>
        <head><script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script></head>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" />
        <table id="dataTableUsers" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Nickname</th>
                <th>Email</th>
            </tr>
        </thead>

        <tfoot>
            <tr>
                <th>ID</th>
                <th>Nickname</th>
                <th>Email</th>
            </tr>
        </tfoot>                      
        </table>
        <script>
        $(document).ready(function() {
            $("#dataTableUsers").dataTable( {
                "processing": true,
                "serverSide": true,
                "ajax": "/datatable-data"
            } );
        } );
        </script>
    ';
});

$app->get('/datatable-data',function(){
    return 
    '{
        "draw": 1,
        "recordsTotal": 2,
        "recordsFiltered": 2,
        "data": [
            ["1", "Nick" ,"nick@mail.com"],["2", "John" ,"john@mail.com"]
        ]
    }';
});

希望对你有帮助。

【讨论】：