Adding the data with fnAddData with bServerSide true

motgupta

I have data loaded in datatable from server which displays 10 rows. I want to add more data in table on click of link instead of redrawing complete table

Here is mine data table code(I have added only relevant code here)

 function(){
       oTable=      $('#customerTable').dataTable({
                    "bJQueryUI": true,
                    "iDisplayStart":0,
                    "iDisplayLength": 10,
                    "bRetrieve": true,
                    "bServerSide": true,
                    "bFilter": false,
                    "bInfo": false,
                    "bAutoWidth": false,
                    "aaSorting": [[1,'desc']],
                    "aoColumns": [
                    {"aTargets": [0],"sName":"customer.fullName", "mData": function(response){
                        return response.customer.fullName;
                    }, "bSortable": false},
                    {"aTargets": [1],"sName":"updatedDate", "mData": function(response){
                        var updateDate = response.updatedDt;
                        return updateDate;
                    }, "bSortable": true},

                    ]

                    "fnDrawCallback": function(oSettings) {


                            }
                        });
            }

When I do oTable.fnGetData(); // It displays rows

Here is mine add data code in data table

 for(i=0; i<jsonData.length;i++) {// i have debugged data is in right json format in js
            oTable.fnAddData(data[i]);

    }

When I do oTable.fnGetData() It displays rows 15 rows but still data is not displayed in my table . Also there is no error on browser console. Am i missing anything ?
Why data is not getting refreshed on table ?

Basically how to add the data with bServerSide true ?

Update :- Using datatable version 1.9.1
I have tried also oTable.fnAddData(data[i], false) but does not work .

allan

You have to had the data to the data source. fnAddData (and the newer rows.add()) are client-side. So when DataTables makes a call to get new data from the server (which it will on every draw - that's the whole point of server-side processing), it will get only the data the server knows about.

So assuming you are reading the data from a database, you need to add the row to the database.

Allan

motgupta

Allan, As i told you i already have data(which I got through separate ajax call ) in json form at client side. I just want to append it to already existing data present in datatable. Thats why i did oTable.fnAddData(data,false); . I just want to add in existing data table, Is it possible ?

If i do redraw i need to bring all data again from server(10 new rows plus 10 rows already present on table) which is performance issue. I want to fetch only new next set of data and then append it to already data present on table.

Something like scrollable functionality but i want to achieve it on click of load more button

kthorngren

If you are controlling the data retrieved with an external ajax call then you probably don't want to enable server side processing. With SSP, Datatables is sending a request to the server for the required data for the table page being displayed for each table draw. But that's not available since you have not defined the data source (ajax) in the Datatables config.

If you turn off SSP then you can use the client side features to add and remove the rows as desired through your external ajax calls. But you are also responsible to remove the rows as your requirements dictate.

Kevin

motgupta

kevin i am controlling the data retrieved with an external ajax call only on click of load more. For everything else i am using SSP. Also i forgot to mention the ajax data source in my post I am using sAjaxSource": custom_URL

As i said i want similar functionality to scrollbar but on click of button instead of hitting scroll bar. Intention is to bring only next set of records and append to existing data instead of fetching already retrieved data again from server

kthorngren

Ok, I missed the fact that you are using ajax in your Datatables.

Maybe I'm misunderstanding what you are trying to do. On page load the first 10 records are fetched and displayed. Sounds like you want a custom paging button that when clicked will get the next 10 rows and display but hold in a buffer the previous 10 rows. Is this correct?

If so then what are you doing with the previous 10 records (are this displayed also)?

Maybe describe in more detail the problem you are trying to solve and what you want to do with the previous records when the button is clicked to fetch more.

Kevin

motgupta

Kevin, This is what I am trying to do

1. On page load , I load the data table with 10 rows.
2. For this , I am using server side processing with parameters like "bServerSide": true and "sAjaxSource": "server_url".
3. There is a custom paging button i.e. "Load More" provided by me below data table
4. On click of it, I hit a ajax call and get the data i.e. next 10 rows in same form as i got in step 1.
5. Now I want to add the data retrieved in step 4 under existing data table. So now there should be total 20 rows(10 rows retrieved in step 1 and 10 rows retrieved in step 4) displayed under data table
6. If I further click load more total 30 rows should be displayed in data table
7. I know i can retrieve again 20 rows in step 4 through fnDraw() with setting "iDisplayStart":0 and "iDisplayLength": 20 but i do not want fetch data already retrieved in step 1 again because of performance optimization. That's why I just want to display the data retrieved in step 4 along with the existing data already retrieved in step 1

Hope it is clear . Let me know in case of any questions/clarification

allan

Yup - got it now. That isn't something that is possible in DataTables' server-side processing mode. The whole point of server-side processing is that it will always request the data to be drawn from the server. That renders the client side functions such as rows.add() useless.

Your only option to get around that if you need server-side processing is to intercept the Ajax request and do your own caching logic like in this example. I'd be surprised if a request for 20 rows would be noticeably slower than 10 though.

The other option is to not use server-side processing. Make your own requests to get the data and add it to the table manually.

Allan

motgupta

Allan as you said "That isn't something that is possible in DataTables' server-side processing mode".

I am wondering how data table scroll functionality works with server side processing . When scroll hits the bottom,does data table fetches all the data i.e. 20 rows(10 data rows already fetched and 10 rows to be fetched from server once scroll hits bottom) again ?

If I hit scroll 20 times to bottom then it means it has to fetch 200 rows in last hit ?

motgupta

Allan

I tried to disable the server side processing on click of load more button temporarily , then add the data manually and then switch on the server side processing back like below

      // switch the SSP off                                      
     oTable.fnSettings().bProcessing = false;
 oTable.fnSettings().bServerSide = false;                       
     oTable.fnSettings().sAjaxSource = null;

     //  Add data to datatable
   oTable.fnAddData(data[i]);

      // switch the SSP on back

     oTable.fnSettings().bProcessing = true;
 oTable.fnSettings().bServerSide = true;                        
     oTable.fnSettings().sAjaxSource = "server_url";

But that did not work too. Can I make this approach work with little bit of tweak ?

allan

I am wondering how data table scroll functionality works with server side processing

If you use Scroller then it will load based on the paging as it uses virtual positioning of the table to simulate continuous scrolling.

If you don't use Scroller - server-side processing and scrolling can only show what has been loaded for that page.

As I say, it is not designed to work the way you are looking for I'm afraid. I'm not aware of a hack that would make it work, and it would be fragile at best even if there was one, since future updates might change things.

Allan