0

我从教程中复制了数据表钻取表的代码，我收到了这个错误。Datatable 出现得很好，但是当我点击它有 Uncaught ReferenceError: anOpen is not defined 的行时。我不知道如何定义它，以及作为什么。它应该在数据表行下方显示一行。

$(document).ready(function () {

var oTable = $('#table_id').dataTable();

$('#table_id tbody tr').live('click', function () {
    var nTr = this.parentNode;
    var i = $.inArray(nTr, anOpen);

    if (i === -1) {
        $('img', this).attr('src', sImageUrl + "details_close.png");
        oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
        anOpen.push(nTr);
    }
    else {
        $('img', this).attr('src', sImageUrl + "details_open.png");
        oTable.fnClose(nTr);
        anOpen.splice(i, 1);
    }
});

function fnFormatDetails(oTable, nTr) {
    var oData = oTable.fnGetData(nTr);
    var sOut =
'<div class="innerDetails">' +
  '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
    '<tr><td>Rendering engine:</td><td>' + oData.calldate + '</td></tr>' +
    '<tr><td>Browser:</td><td>' + oData.recordingfile + '</td></tr>' +
    '<tr><td>Platform:</td><td>' + oData.uniqueid + '</td></tr>' +
    '<tr><td>Version:</td><td>' + oData.clid + '</td></tr>' +
    '<tr><td>Grade:</td><td>' + oData.did + '</td></tr>' +
  '</table>' +
'</div>';
    return sOut;
}


$('#startdate').bind("change paste keyup", function () {
    var startdatetext = $('#startdate').val();
    startdatetext.replace("_", '');

    var startlength = startdatetext.length;
    console.log(startlength);

    if (startlength == 10 || startlength == 0) {
        $('#table_id').dataTable().fnDraw();
    }
});

$('#enddate').bind("change paste keyup", function () {
    var enddatetext = $('#enddate').val();
    enddatete = enddatetext.replace("_", '');

    var endlength = enddatetext.length;
    console.log(endlength);

    if (endlength == 10 || endlength == 0) {
        $('#table_id').dataTable().fnDraw();
    }
});

$('#csearchtext').bind("change paste keyup", function () {

    var input = $('#csearchtext').val();
    var dropdownindex = $("select[name='columnlist'] option:selected").index();
    var radioselected = $("input:radio[name='group2']:checked").val();
    var searchpattern = '';

    switch (radioselected) {
        case '1':
            searchpattern = '^' + input;
            break;
        case '2':
            searchpattern = input;
            break;
        case '3':
            searchpattern = input + '$';
            break;
    }

    $('#table_id').dataTable().fnFilter(searchpattern, dropdownindex + 1, true, true, true, false);

});

$('#columnlist').on('change', function () {

    $('#table_id').dataTable().fnFilterClear();

});

$('#dblist').on('change', function () {

    var selected = $('#dblist').find(":selected").text();
    tablefill(selected);

});

$('#search').click(function () {

    var selected = $('#dblist').find(":selected").text();
    tablefill(selected);

});

function tablefill(selected) {
    $('.advsearchbar').show();
    $('#stable').show();

    $('#table_id').dataTable({
        "sAjaxSource": '/php/connect/searchtablequery.php',
        "bProcessing": true,
        "sScrollY": "500px",
        "bDeferRender": true,
        "bDestroy": true,
        "sAjaxDataProp": "",
        "fnServerParams": function (aoData) {
            aoData.push({ "name": "db", "value": selected });
        },
        "aoColumns": [
            { "mData": "calldate" },
            { "mData": "recordingfile" },
            { "mData": "uniqueid" },
            { "mData": "clid" },
            { "mData": "did" },
            { "mData": "lastapp" },
            { "mData": "dst" },
            { "mData": "disposition" },
            { "mData": "duration_in_mins_and_secs" }, ],
        "iDisplayLength": 20,
        "bJQueryUI": true,
        "sPaginationType": "full_numbers",
        "sDom": '<"H"Tfr>t<"F"ip>',
        "oTableTools": {
            "sSwfPath": "/DataTables/extras/TableTools/media/swf/copy_csv_xls_pdf.swf",
            "aButtons": [
                "copy", "csv", "xls", "pdf",
                {
                    "sExtends": "collection",
                    "sButtonText": "Save",
                    "aButtons": ["csv", "xls", "pdf"]
                }]
        }
    });
}
});
4

1 回答 1

0

该数组anOpen在第 12 行首次使用（包括空行）。但是，除非在此脚本上方的某个地方定义了它，否则正如错误所暗示的那样，该数组是未定义的。您可以通过相应地修改代码来解决此问题：

$(document).ready(function () {

    var anOpen = []; // <- Add this line
    var oTable = $('#table_id').dataTable();

    ...
});

可以在子标题表下的文档中找到此更改。

作为旁注， .live() 从 jQuery 1.9 开始被弃用和删除。您应该考虑修改代码以使用 .on()。您可以通过click以下方式修改处理程序来做到这一点：

$('#table_id tbody').on('click', 'tr', function (e) { ... });

通过像这样修改代码，您可以为表中的所有元素委派click事件。tr

希望这可以帮助。

于 2013-09-18T19:34:55.847 回答