DataTables Server side and Slim Framework

Question

I've been working on datatables server side processing and slim framework and I always get this error in my browser:

When I check chrome developer tools, I am seeing this in the console:

Failed to load resource: the server responded with a status of 404 (Not Found) 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

My html code is here:

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

My script:

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

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

I successfully used datatables but not server side processing. It loads 1000+ rows for about 5 seconds and I don't want my client to wait every time like that. I tried searching and found that datatables server side processing can be helpful. What have I done wrong with my code? Thank you in advance.

just to be 100% clear, you can confirm that http://localhost:8000/user/ssp-data.php (without a query string) can be found and served by your web server, right? — HPierce
@HPierce, I guess it needs a router since I am using slim framework? — wobsoriano
I don't know slim enough to say if that's the best way to do this, but that will definitely work if you can find a way to pass all your parameters through to the script. — HPierce
You might be able to include "ssp-data.php"; after you define your route. If it works out for you, Ill post it as an answer. — HPierce

Riza Riza · Accepted Answer · 2017-04-04T10:15:58

Using slims Framework 3, you need to have 2 routes for this, the first one:

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

is for rendering the HTML page, the '/datatable-example' could be changed into whatever you want. The second route:

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

is for returning the data. The 'datatable-data' could be changed but it must be consistent with the JS code below:

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

notice that the value of "ajax" is also "datatable-data", the same as the second route.

I'll copy the whole example below, but it's kinda dirty and hacky, but it should work when you copy to your route file:

$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" ,"[email protected]"],["2", "John" ,"[email protected]"]
        ]
    }';
});

hope it helps.

DataTables Server side and Slim Framework

1 Answers