Php DataTables服务器端和Slim框架_Php_Jquery_Datatables_Slim

Php DataTables服务器端和Slim框架

php jquery datatables

Php DataTables服务器端和Slim框架,php,jquery,datatables,slim,Php,Jquery,Datatables,Slim,我一直在从事datatables服务器端处理和slim框架的工作，我的浏览器中总是出现以下错误：当我检查chrome developer tools时，我在控制台中看到：加载资源失败：服务器响应状态为404（未找到） …art=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&&ux=1440509303609 我的html代码在这里： <table id="dataTableUsers" class="table tabl

我一直在从事datatables服务器端处理和slim框架的工作，我的浏览器中总是出现以下错误：

当我检查chrome developer tools时，我在控制台中看到：

加载资源失败：服务器响应状态为404（未找到） …art=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&&ux=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

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

使用slims Framework 3，您需要有两条路径，第一条路径：

$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数据”可以更改，但必须与下面的JS代码一致：

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

注意，“ajax”的值也是“datatable data”，与第二个路由相同

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

$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"]
        ]
    }';
});

$app->get（'/datatable-example'，function（）{
返回
'
身份证件
昵称
电子邮件
身份证件
昵称
电子邮件
$（文档）.ready（函数（）{
$（“#dataTableUsers”）。dataTable（{
“处理”：对，
“服务器端”：正确，
“ajax”：“/datatable数据”
} );
} );
';
});
$app->get（'/datatable data'，function（）{
返回
'{
“抽签”：1，
“recordsTotal”：2，
“已过滤记录”：2，
“数据”：[
[“1”，“尼克”nick@mail.com“]，[“2”，“约翰”john@mail.com"]
]
}';
});

希望有帮助。