last record in table being selected after server side pagination response

ianmann56

If I have one or more rows selected when I navigate to the next page in a server side processed table, The last record on the new page is automatically selected. If I don't have any row selected though when I go to next page, it is fine.

I am positive that it's not selected by my code as the only time I manually select rows through the data table API is not being called.

Why is it automatically selecting the last row? How can I stop this?

kthorngren

Why is it automatically selecting the last row? How can I stop this?

Without seeing what you are doing its hard to say. I put together this simple server side processing test case. Once the table is loaded it uses the Select extension to select a couple rows. Moving to another page does not select any rows.

http://live.datatables.net/zifuroto/1/edit

Maybe you can update the test case to show your issue so we can help debug.

Kevin

ianmann56

Here's my initialization.

orderTable.dataTableApi = $(orderTable.htmlId).DataTable({
        paging: true,
        ordering: true,
        searching: true,
        processing: true,
        serverSide: true,
        ajax: {
            url: "/OrderDataTable/",
            type: "POST",
            data: function (queryData) {
                
            },
            dataSrc: function (response) {
                window.orderItems = {};
                // Newly loaded ones will be set as they are processed.
                return response.data;
            }
        },
        language: {
            select: {
                rows: {
                    _: "Selected %d customers",
                    0: "Click a row to select that customer",
                    1: "Selected 1 customer"
                }
            },
            buttons: {
                selectAll: "Select all items",
                selectNone: "Select none"
            }
        },
        columns: [
            {
                "name": "Select",
                "searchable": false,
                "orderable": false,
                "render": function (data, renderType, orderItem) {
                    window.orderItems[orderItem.Id] = orderItem;
                    selectedOrderItems.loadIdentifierToPage(orderItem.Id); // Method does not even have access to datatable api.
                    var checkMark = getCheckMark(true);
                    var divClasses = "js-order-item-selector order-item-selector pointer flex align-center justify-center";
                    var divInTD = surroundInDiv(checkMark, null, divClasses);
                    return divInTD;
                }
            },
            {
                "name": "Edit",
                "searchable": false,
                "orderable": false,
                "render": function (data, renderType, orderItem) {
                    var html = "<div class=\"btn-order-item-order button pointer js-btn-edit-order-item\" type=\"button\">Edit</div>"
                    return html;
                }
            },
            {
                "name": window.constants.orderItemTableColumnNames.status,
                "data": "Status",
                "className": "cell-status",
                "render": function (data, renderType, orderItem) {
                    return window.constants.orderItemStatuses[data].englishName;
                }
            },
            {
                "name": window.constants.orderItemTableColumnNames.deliveryBusinessName,
                "data": "DeliveryBusinessName"
            },
            {
                "name": window.constants.orderItemTableColumnNames.deliveryContactPerson,
                "data": "DeliveryContactPerson"
            },
            {
                "name": window.constants.orderItemTableColumnNames.deliveryContactPhone,
                "data": "DeliveryContactPhone"
            },
            {
                "name": window.constants.orderItemTableColumnNames.deliveryAddress,
                "data": "FullAddress"
            },
            {
                "name": window.constants.orderItemTableColumnNames.deliveryDate,
                "data": "DateOfDelivery",
                "render": function (data, renderType, orderItem) {
                    var display;
                    if (data) {
                        var dateStr = "new " + data.replace("/", "").replace("/", "");
                        var deliveryDate = eval(dateStr);
                        display = formatDate(deliveryDate, "MM/dd/yyyy hh:mm t");
                    }
                    else {
                        display = "(None given)";
                    }
                    return display;
                }
            },
            {
                "name": window.constants.orderItemTableColumnNames.storeId,
                "data": "StoreId"
            },
            {
                "name": window.constants.orderItemTableColumnNames.franchiseeName,
                "data": "StoreContactName"
            },
            {
                "name": window.constants.orderItemTableColumnNames.storeServiceMethod,
                "data": "IsDeliveryStore",
                "render": function (data, renderType, orderItem) {
                    var isSuccess = data;
                    var successCheckbox = getCheckMark(isSuccess);
                    var display = surroundInDiv(successCheckbox, null, "js-order-item-placed-display order-item-placed-display");
                    return display;
                }
            },
            {
                "name": window.constants.orderItemTableColumnNames.storeCount,
                "render": function (data, renderType, orderItem) {
                    return "";
                }
            },
            {
                "name": window.constants.orderItemTableColumnNames.finalPrice,
                "data": "ResolvedPrice",
            },
            {
                "name": window.constants.orderItemTableColumnNames.overridePrice,
                "data": "OverridePrice",
            },
            {
                "name": window.constants.orderItemTableColumnNames.tax,
                "render": function (data, renderType, orderItem) {
                    return "";
                }
            },
            {
                "name": window.constants.orderItemTableColumnNames.driverTip,
                "render": function (data, renderType, orderItem) {
                    return "";
                }
            },
            {
                "name": "Products",
                "searchable": false,
                "orderable": false,
                "render": function (data, renderType, orderItem) {
                    var html = getProductsDropdown(data, orderItem);
                    return html;
                }
            }
        ],
        select: {
            style: "os",
            selector: 'td:first-child'
        }
    });

kthorngren

I don't think the problem has to do with your initialization. What we need to see is a test case showing the issue so we can help. Can you post a link to your page instead?

Kevin

ianmann56

It's all local development on my dev machine.

kthorngren

Ok. If you can't update the test case with the code you use to select rows can you post it here?

Kevin