Server pagination - When i change page number i will fetches data but that will not to rerendered in

ezhil9841

Hi all,

I am using data table with backbone JS. When first time loading of data table data which fetched from server is loaded. When i change page number or anything AJAX request will be called. It also fetched the data. But the the new data which is not rendered in view.

            var table = $('#main_table');
                dT = table.DataTable({
                    "ajax": { "url": url, "cache": false, "type": "POST" },
                    "columns": cols,
                    "serverSide": true,
                    "cache": false,
                    "processing": false,
                    "destroy": true,
                    "language": {
                        "emptyTable": "No data available in table",
                        "info": "Showing _START_ to _END_ of _TOTAL_ entries",
                        "infoEmpty": "No entries found",
                        "infoFiltered": "(filtered1 from _MAX_ total entries)",
                        "lengthMenu": "Show _MENU_ entries",
                        "search": "Search:",
                        "zeroRecords": "No matching records found",
                        search: "_INPUT_",
                        searchPlaceholder: "Search from below results.",
                        "paginate": {
                            "previous": "Prev",
                            "next": "Next",
                            last": "Last",
                            "first": "First"
                        }
                    },
                    "pageLength": 10,
                    "pagingType": "bootstrap_full_number",
                    "dom": "<'row'<'export-tool margin-right-10'>r><'table-scrollable't><'row'<'col-md-4 col-sm-12 margin-top-10'li><'col-md-8 col-sm-12 margin-top-10'p>>",
                    "order": orderDefault,


                    "fnDrawCallback": function (oSettings) {

                        $this.tableLoad = true;
                        var totalRecords = oSettings.fnRecordsTotal();
                    },

                    "createdRow": function (row, data, index) {

                    },
                });

kthorngren

You are using server side processing. Does your server script follow the SSP protocol described here:
https://datatables.net/manual/server-side

Do you get any alert messages or errors in the browser's console?

Please post the JSON response, from the browser's developer tools, you get for a page that doesn't display.

Kevin

ezhil9841

colin

Hi @ezhil9841 ,

That's the data going to the server, which looks fine. Does the server respond with the expected data? And as Kevin asked, are you seeing errors in the server scripts or in the browser's console?

Cheers,

Colin

ezhil9841

I am getting my desired response from server. But my data is not rerendering my data.

kthorngren

Please post the JSON response, from the browser's developer tools, you get for a page that doesn't display.

Kevin

ezhil9841

{
  "data": [
    {
      "country": null,
      "#": 11,
      "city": "Manila",
      "postalCode": null,
      "state": null,
      "locationCode": null,
      "locationMstrSeq": 2896
    },
    {
      "country": null,
      "#": 12,
      "city": "Noida",
      "postalCode": null,
      "state": null,
      "locationCode": null,
      "locationMstrSeq": 2899
    },
    {
      "country": "India",
      "#": 13,
      "city": "Pune",
      "postalCode": null,
      "state": "Maharashtra",
      "locationCode": null,
      "locationMstrSeq": 8
    },
    {
      "country": null,
      "#": 14,
      "city": "Taguig",
      "postalCode": null,
      "state": null,
      "locationCode": null,
      "locationMstrSeq": 2897
    },
    {
      "country": null,
      "#": 15,
      "city": "u",
      "postalCode": null,
      "state": null,
      "locationCode": null,
      "locationMstrSeq": 362
    },
    {
      "country": null,
      "#": 16,
      "city": "Vishakhapatnam",
      "postalCode": null,
      "state": null,
      "locationCode": null,
      "locationMstrSeq": 326
    }
  ],
  "draw": 2,
  "recordsFiltered": 19,
  "recordsTotal": 19
}

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

It would be worth looking at the serverSide protocol here. You're saying recordsTotal is 19, but only 6 records are being returned (unless you're snipping the output). Also, this page here, on the Ajax tab, will show you how it looks in motion.

Cheers,

Colin

ezhil9841

Hi Colin,

I have gone through all the server side docs. When i try independantly which is working. When i try with backbone the new data will not be rendered in Datatable.

colin

Hi @ezhil9841 ,

Check the browser's network tab for the Ajax request. You'll need to confirm what is being sent to the server is correct, and if it is, confirm that the return is correct. One of them must be wrong. If you can link to the page, or create a test case, we're happy to have a look. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

kthorngren

If you are trying to use backbonme.js with Datatables you might be interested in this thread and the thread it links to:
https://datatables.net/forums/discussion/comment/133532/#Comment_133532

You mentioned in this in your other thread.

I am using Datatable with backbone JS. While loading the first page my callback function has been called and data will be rendered in table. When i change page number data comes from server my call back is not called and data is not rerendered.

When you say "data comes from server my call back is not called" what is the callback that is not called?

EDIT: You may want to look on SO for Datatables and backbone.js integration. There seems to be some threads there asking about this.

Kevin

ezhil9841

I am using the below code to redraw the table.

"fnDrawCallback": function (oSettings) {

                        console.log('DataTables has redrawn the table : ', oSettings);

                        $('#table-region').unmask("");
                        var totalRecords = oSettings.fnRecordsTotal();
                    },

It will be called while loading the table first time. While changing the page number request will be triggered to server. Server returns set of data which will not rendered in table.

colin

Hi @ezhil9841 ,

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin