Question

我目前有一个生成服务器端的表（表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);
    });
}

表A 中的分页和行突出显示在我第一次点击表A 中的任何行时都能正常工作。但是，当我点击表A 中的另一行时，表B 中的行突出显示停止工作，并且SetInfo()以某种方式被调用两次。如果我再次在表A 中选择另一行，则SetInfo()现在被调用四次，然后是八次等。当我尝试使用（当前已注释掉）时：< / p>

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

表B 的第1页上的所有内容都按预期工作，但在其他任何页面上都没有 - 它似乎无法正确绑定。

知道我可能做错了吗？

Answer 1

我们想通了。我们将绑定放在自己的方法中并使用回调＆＃39; drawCallback＆＃39;：

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]);
    });
 }

jQuery Datatables失去了对分页的参考

1 个答案: