Adding a new row to data table grid

gooner4life

Thanks for the data table plugin. It solved most of the problems. But not fully though. I am using backbone.js in the front end and jersey frame work in the backend. My issue is when ever I clicked next button in the data table I am able to get the set of records according to my start and end index I pass as parameters. But, when it hits the line fnAddTr is going back to fnServerData method and this repeats infinitely. So, I tried appending the dom (this.$('tbody').append(rowView.render().el);). But it got appended to the same page and it is not moving to another page.For instance 0-20 initial display. After clicking next it is 0-40 in same page instead of 21-40 in 2nd page.
This is my data table code

that.table = that.$('#employeesTable').dataTable({
    "iDisplayLength": 20,
    "iDeferLoading": 46,
    "bServerSide": true,
    "sDom": 'lfr<"giveHeight"t>ip',
    "aaSorting": [[
            1,
            'asc'
        ]],
    "aoColumns": [{
        "bSortable": false
    }, {
        "bSortable": true
    }, {
        "bSortable": true
    }, {
        "bSortable": true
    }, {
        "bSortable": false
    }],
    "fnServerData": function(url, aaData, fn) {
        //that.renderPageRows(model);
        $.ajax({
            "url": that.getUrl(),
            "data": aaData,
            "iDisplayLength": 20,
            "success": function(data) {
                _.each(data, function(model) {
                    //that.renderPageRows(model);
                    var rowView = new TableRow({
                        model: model,
                        isPagination: true
                    });
                    //   this.$('tbody').append(rowView.render().el);
                    this.table.fnAddTr(rowView.render().el);
                })
            },
            "dataType": "json",
            "cache": false
        });
    }
});

gooner4life

Can anybody shed some light over this issue?

allan

You are using server-side processing - so you need to add the row to the server-side data source and then redraw the table. In server-side processing mode DataTables is just a dumb display and event library.

The client-side methods for manipulating the table are not appropriate for use with a server-side processing table.

Allan

gooner4life

My basic requirement is to do pagination, i.e whenever I click next/previous it should hit backend database and get the next 20 records depending. I am creating the datatables rows using the handlebar library. I setting multiple values in a single column like under the column 'Name' I m displaying Name, mobile and email. They all are from backend. Is there any way to do pagination(not client side) with this opeartion?

allan

So when you create your new row, does the server see that information? I guess it must be recorded in the database? If so, then simply call draw() at that point.

There is no option to redraw the table without an Ajax request when server-side processing is enabled.

Allan