Question

我正在创建一个DataTables表，其中数据来自AJAX调用并且加载正常。搜索工作也很好。当我为multi-filter-select添加代码时，会显示下拉列表，但它们是空的。我正在为jQuery和DataTables使用最新的库。

JS

function overview() {
    $.ajax({
        url: "/_inc/_ajax/ajax.tables.php",
        dataType: 'json',
        success: function(results) {

        var table = $('#overviewTable').DataTable
        ({
            initComplete:       function () {
                                    this.columns().every( function () {
                                        var column = this;
                                        var select = $('<select><option value=""></option></select>')
                                            .appendTo( $(column.footer()).empty() )
                                            .on( 'change', function () {
                                                var val = $.fn.dataTable.util.escapeRegex(
                                                    $(this).val()
                                                );

                                                column
                                                    .search( val ? '^'+val+'$' : '', true, false )
                                                    .draw();
                                            } );

                                        column.data().unique().sort().each( function ( d, j ) {
                                            select.append( '<option value="'+d+'">'+d+'</option>' )
                                        } );
                                    } );
                                }
        });

        table.clear();
        for(var i = 0; i < results["id"].length; i++) {
            table.row.add(
                [ 
                    results["id"][i],
                    results["title"][i],
                    results["Tier"][i],
                    results["region"][i],
                    results["2016"][i],
                    results["2017"][i],
                    results["Letter_Type"][i],
                    results["Change_Type"][i],
                ]
            ).draw();  
        }
    },
    error: function (xhr, ajaxOptions, thrownError) {
        alert("ERROR: " + xhr.responseText + " - " + thrownError);
    }
});
}

HTML

<table id="overviewTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
    <thead>';
        <tr>
            <th>ID</th>
            <th>TITLE</th>
            <th>TIER</th>
            <th>REGION</th>
            <th>2016</th>
            <th>2017</th>
            <th>LETTER TYPE</th>
            <th>CHANGE TYPE</th>
         </tr>
     </thead>
     <tfoot>
         <tr>
            <th>ID</th>
            <th>TITLE</th>
            <th>TIER</th>
            <th>REGION</th>
            <th>2016</th>
            <th>2017</th>
            <th>LETTER TYPE</th>
            <th>CHANGE TYPE</th>
          </tr>
      </tfoot>
</table>';

Answer 1

我设法弄清楚它为什么不起作用。我不得不使用DataTables使用的ajax语法。更多信息可以在DataTables找到。这是代码：

JS

function overview() {
var table = $('overviewTable').DataTable
({
    "ajax":         {
        "url": "/_inc/_ajax/ajax.tables.php",
        "dataSrc": "",
    },
    "columns":      [
        { "data": "id" },
        { "data": "title" },
        { "data": "tier" },
        { "data": "region" },
        { "data": "2016" },
        { "data": "2017" },
        { "data": "Letter_Type" },
        { "data": "Change_Type" },
    ],
    initComplete: function () {
        var columnsCustom = [2, 3, 6, 7];
        var columnNames = ["Tier", "Region", "Letter Type", "Change Type"];
        var columnId = ["tier", "region", "letterType", "changeType"];
        for (var i = 0; i < 4; i++) {
            this.api().columns(columnsCustom[i]).every( function () {
                var column = this;
                var select = $('<label for="' + columnId[i] +'" class="sr-only">' + columnNames[i] +'</label><select id="' + columnId[i] +'"><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search( val ? '^' + val + '$' : '', true, false )
                            .draw();
                    } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="' + d + '">' + d + '</option>' )
                } );
            } );
        }
    },
});

}

HTML

<table id="overviewTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead>';
    <tr>
        <th>ID</th>
        <th>TITLE</th>
        <th>TIER</th>
        <th>REGION</th>
        <th>2016</th>
        <th>2017</th>
        <th>LETTER TYPE</th>
        <th>CHANGE TYPE</th>
     </tr>
 </thead>
 <tfoot>
     <tr>
        <th>ID</th>
        <th>TITLE</th>
        <th>TIER</th>
        <th>REGION</th>
        <th>2016</th>
        <th>2017</th>
        <th>LETTER TYPE</th>
        <th>CHANGE TYPE</th>
      </tr>
  </tfoot>

DataTables multi-filter-select not fillulating下拉列表

1 个答案: