0

データ テーブル ドリル ダウン テーブルのチュートリアルからコードをコピーしましたが、このエラーが発生しています。Datatable は正常に表示されますが、行をクリックすると Uncaught ReferenceError: anOpen が定義されていません。それをどのように定義するのか、何として定義するのかわかりません。データテーブル行の下に行が表示されます。

$(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();

    ...
});

この変更は、小見出しTableの下のドキュメントに記載されています。

補足として、.live() は廃止され、jQuery 1.9 で削除されました。.on() を使用するようにコードを変更することを検討する必要があります。clickこれを行うには、次の方法でハンドラーを変更します。

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

このようにコードを変更することで、テーブル内のすべての要素のclickイベントを委任できます。tr

お役に立てれば。

于 2013-09-18T19:34:55.847 に答える