jQuery Datatables потеря ссылки на пагинации

В настоящее время у меня есть таблица, которая генерируется на стороне сервера (таблица A). Щелчок строки в таблице a вызывает CreateTable (arrayData):

function CreateTable(arrayData){
var table = $('#tableB').DataTable({
            destroy: true,
            bFilter: false,
            bLengthChange: false,
            dt: "[-head|-body]-left",
            "data": arrayData,
            "language": {
                "paginate": {
                    "first": "First",
                    "last": "Last",
                    "next": "Next",
                    "previous": "Prev"
                }
});

$('#tableB tbody').on('click', 'tr', function () {
    //$("#tableB tbody tr").click(function (event) {
    if ($(this).hasClass('selected')) {
        $(this).removeClass('selected');
    }else{
        table.$('tr.selected').removeClass('selected');
        $(this).addClass('selected');
    }
    var rowIdx = table.row(this).index();
    SetInfo(arrData[rowIdx], null);
    });
}

Разбиение на страницы и выделение строк в таблице B отлично работает при первом щелчке по любой строке в таблице A . Однако, когда я нажимаю на другую строку в таблице A, строки в таблице B перестают работать и SetInfo()как-то вызываются дважды. Если я снова выберу другую строку в таблице A , SetInfo()то теперь вызывается четыре раза, затем восемь и т. д. Когда я пытаюсь использовать (в настоящее время комментируется):

$("#tableB tbody tr").click(function (event) {...}

Все работает так , как ожидалось на странице 1 таблицы B, но не на каких — либо других страницах-это, кажется, неправильно связывается.

Есть идеи, что я делаю не так?

1 ответ

  1. Мы это выяснили. Мы поместили привязку в свой метод и использовали обратный вызов ‘drawCallback’:

    function CreateTable(arrayData){
        var table = $('#tableB').DataTable({
        destroy: true,
        bFilter: false,
        bLengthChange: false,
        dt: "[-head|-body]-left",
        "data": arrayOfData,
        "drawCallback": BindOnClick,
        "pageLength": 5,
        ....etc.
     });
    
    function BindOnClick() {
        //get the table object:
        var table = $('#tableB').DataTable();
        //set the row highlighting:
        $("#tableB tbody tr").off("click").on("click", function () {  //.off in order to avoid multiple bindings
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
           }
           else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
            }
    
            //now call any method you want and pass in data
            //based on row index:
            var rowIdx = table.row(this).index();
            SetInfo(table.data()[rowIdx]);
        });
     }