Question

我一直致力于数据表服务器端处理和 slim framework ，我总是在浏览器中收到此错误：

当我检查chrome开发人员工具时，我在控制台中看到了这一点：

无法加载资源：服务器响应状态为404（未找到） http://localhost:8000/user/ssp-data.php?draw=1&columns%5B0%5D%5Bdata%5D=0&c ...技术= 0＆安培;长度= 10安培;搜索％5Bvalue％5D =安培;搜索％5Bregex％5D =假安培; _ = 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秒钟，我不希望我的客户每次都这样等待。我尝试搜索，发现数据表服务器端处理可能会有所帮助。我的代码怎么办？提前谢谢。

Answer 1

使用slims Framework 3，你需要有2条路线，第一条路线：

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

用于呈现HTML页面，＆＃39; / datatable-example＆＃39;可以改成你想要的任何东西。第二条路线：

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

用于返回数据。＆＃39;数据表 - 数据＆＃39;可以改变但它必须与下面的JS代码一致：

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

注意＆＃34; ajax＆＃34;的价值也是＆＃34; datatable-data＆＃34;，与第二条路线相同。

我将复制下面的整个示例，但它有点脏和黑客，但是当你复制到路径文件时它应该有效：

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

希望它有所帮助。

DataTables Server端和Slim Framework

1 个答案: