Question

我正在开发一个ASP.Net MVC 5应用程序。我还使用JQuery数据表（http://datatables.net/）在一个Razor Views中显示表格数据。

Datatable由对我的Controller中的方法的Ajax请求填充，然后返回Json Data。下面是代码，这很好用。

Razor查看

<script>
    $(document).ready(function () {
        $('#dataTables-example').dataTable({
            "bServerSide": true,
            "sAjaxSource": "/Shift/GetShifts",
            "iDisplayLength": 20,
            "aLengthMenu": [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
            "aoColumns": [
                      { "sName": "shiftDateID", "visible": true, "bSortable": false },
                      { "sName": "shiftTitle", "visible": true, "bSortable": false },
                      { "sName": "description", "visible": true, "bSortable": false },
                      { "sName": "description", "visible": true, "bSortable": false },
                      { "sName": "shiftStartDate", "visible": true, "bSortable": false },
                      { "sName": "shiftEndDate", "visible": true, "bSortable": false }
            ]
        });
    });
</script>

现在，我希望能够通过列 shiftTitle 和说明的下拉列表来过滤数据。这是我遇到问题的地方。我尝试按照此链接http://datatables.net/examples/api/multi_filter_select.html了解如何操作。所以我修改了我的代码，以包含 initComplete 属性。

<script>
    $(document).ready(function () {
        $('#dataTables-example').dataTable({
            "bServerSide": true,
            "sAjaxSource": "/Shift/GetShifts",
            "iDisplayLength": 20,
            "aLengthMenu": [[5, 10, 25, 50, 100], [5, 10, 25, 50, 100]],
            "aoColumns": [
                      { "sName": "shiftDateID", "visible": true, "bSortable": false },
                      { "sName": "shiftTitle", "visible": true, "bSortable": false },
                      { "sName": "description", "visible": true, "bSortable": false },
                      { "sName": "description", "visible": true, "bSortable": false },
                      { "sName": "shiftStartDate", "visible": true, "bSortable": false },
                      { "sName": "shiftEndDate", "visible": true, "bSortable": false }

            ],
            "initComplete": function () {
                var api = this.api();

                api.columns().indexes().flatten().each(function (i) {
                    var column = api.column(i);
                    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>')
                    });
                });
            }
        });
    });
</script>

不幸的是，这似乎对我不起作用。数据表仍然显示信息，但没有显示下拉列表。

有人可以帮我这个吗？任何建议都将不胜感激。

感谢。

更新我已将遗留代码更新为此（基于来自ChrisV的评论），但现在没有数据被拉回到我的数据表中。

<script>
    $(document).ready(function () {

        $('#dataTables-example').dataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "/Shift/GetShifts",
                "type": "POST"
            },
            "columns": [
            { "data": "shiftDateID" },
            { "data": "shiftTitle" },
            { "data": "description" },
            { "data": "description" },
            { "data": "shiftStartDate" },
            { "data": "shiftEndDate" }
        ]
        });

    });
</script>

添加下拉列表以过滤JQuery数据表

0 个答案: