jquery data tables - Server-side processing not working as expected

Question

I have got a JSON object that I receive from a php file,the JSON object is created as per the specified format.But I get the the warning UNRESPONSIVE SCRIPT.I have got over 50,000 records and it loads every record instead of the 20 records I specified in the iDisplayLength parameter. I know Im doing something wrong,please help.

The JSON Object :

{
    "iTotalRecords":"52000",
    "iTotalDisplayRecords":"52000",
    "sEcho":0,
    "aaData":[
        {"itemID":"13901","itemName":"Item 1","itemModel":"Model 1","Price":"20"},
        {"itemID":"13902","itemName":"Item 2","itemModel":"Model 2","Price":"30"},
        {"itemID":"13903","itemName":"Item 3","itemModel":"Model 3","Price":"50"},
        {"itemID":"13904","itemName":"Item 4","itemModel":"Model 4","Price":"60"},
        {"itemID":"13905","itemName":"Item 5","itemModel":"Model 5","Price":"20"},
        ................
    ]
}    

$(document).ready( function () {
        $('#tbItems').dataTable( {
                        "bProcessing": true,
                        "bServerSide": true,
                        "sAjaxSource": "getItems",
                        "aoColumns": [
                          { "sTitle": "itemID",  "mDataProp": "itemID" },
                          { "sTitle": "itemName",  "mDataProp": "itemName" },
                          { "sTitle": "itemModel", "mDataProp": "itemModel" },
                          { "sTitle": "itemPrice",  "mDataProp": "itemPrice" }
                        ],
                        "sPaginationType": "full_numbers",
                        "bLengthChange": false,
                        "iDisplayLength": 20,
                        "aaSorting": [[ 1, "asc" ]]
        });
    });

You are getting the unresponsive script notice from the browser, right? Have you tried sending less than 50k records and to let the the user page through results? — Duane Gran
– Duane Gran, Commented Mar 5, 2012 at 13:15
@DuaneGran yea Im getting the unresponsive script from the browser.No I have not tried sending less than 50k.What do you mean my user page through results? Sorry didnt get that bit — manraj82
– manraj82, Commented Mar 5, 2012 at 14:04
@manraj82 you are asking the browser to parse 50k records in JSON format. This is a lot of data to process. Start by passing back only 1,000 records and see if it runs quickly. Now change your back end to deliver only 1k and give the user next/prev buttons to page through the results and a good search box to find records in the entire 50k set. — Duane Gran
– Duane Gran, Commented Mar 5, 2012 at 14:15
Check ShadowScripter's answer. To elaborate, your script is setting server-side, but not actually doing server-side processing. In your current example, despite setting bServerSide to true, you're actually just using DataTables with an Ajax source, which is not the same thing. — Greg Pettit
– Greg Pettit, Commented Mar 6, 2012 at 2:02

ShadowScripter · Accepted Answer · 2012-03-05 17:52:34Z

3

The server can only pass a certain amount of data through a request.

Essentially, what datatables is doing, is, even though you define a display parameter, it will still fetch all the data from your source and then process it.

Datatables fetches the data and then processes everything and puts it in an internal array. I can only imagine how much space it would take up after only a couple of hundred rows.

In any case, the bServerSide boolean notifies datatables that you're going to handle and process everything yourself and then feed back what you want. You should read up on the documentation and examples available at datatables.net.

You should pay close attention to how they do the server side processing since it is perfect for your scenario where you have a huge dataset to work with.

iDeferLoading could be used if you knew exactly how many rows your initial dataset has
Server side setup (Scroll down to "Server-side (PHP) code") & Datatables server-side processing pipeline

The last one shows a complete reference to how to manage large datasets and how to do the paging, and pretty much everything, on the server side, effectively saving up loads of processing time for datatables.

Your problem is that you're returning everything but forgetting to filter the data to only include the rows on the current "page". This is all done on the server-side, hence the variable name.

edited Mar 5, 2012 at 17:52

answered Mar 5, 2012 at 15:31

ShadowScripter

7,3695 gold badges39 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Greg Pettit Over a year ago

This is mostly correct. iDeferLoading is used when the first page of the DataTable is rendered in the HTML view rather than being fetched from the server; in other words, it's not really about knowing how many rows the dataset has, but whether you want the rendered HTML to contain that first page or whether the data will get retrieved from the server after the HTML renders.

manraj82 Over a year ago

@shadowscripter thanks for your answer,made more sense when you explained it to me

Collectives™ on Stack Overflow

jquery data tables - Server-side processing not working as expected

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related