通过传递参数筛选 JQuery 数据表

Question

我正在构建一个 ASP.Net MVC 5 网络应用程序，它使用 JQuery Datatables (1.10.4) 在我的一个 Razor 视图中显示表格数据。因为 table 只会显示最多 300 条记录，所有记录都会一次显示，即没有 Ajax/ JSon 用于根据需要提取数据。

我已使用此 https://datatables.net/examples/api/multi_filter_select.html 向某些数据 table 列添加下拉菜单以允许过滤。这很好用（见下面的代码）。

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


        $('#dataTables-example').dataTable({
            "columnDefs": [
                            { "width": "1%", "targets": 0, "orderable": false },
                            { "width": "5%", "targets": 1 },
                            { "width": "10%", "targets": 2 },
                            { "width": "5%", "targets": 3 },
                            { "width": "1%", "targets": 4 },
                            { "width": "1%", "targets": 5 },
                            { "width": "1%", "targets": 6 },
                            { "width": "1%", "targets": 7, "orderable": false }
                          ]
                          ,
            initComplete: function () {
                var api = this.api();

                api.columns().indexes().flatten().each(function (i) {
                    var column = api.column(i);

                    //Only show filter for these columns
                    if (i == 1 || i == 2 || i == 3) {

                        var select = $('<select style="width: 170px;"><option value="">Select</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>

我的问题是，当页面加载时，我在查询字符串中传递了一个值 http://localhost:55437/Shift?value1=testValue，我希望使用该查询字符串值 (Value1) 并将其传递给其中一个下拉过滤器，以便Datatable 数据根据从查询字符串接收到的值自动过滤。这有意义吗？

如果是这样，有人可以帮我解决这个问题吗？

非常感谢。

Answer 1

如果我正确理解您的问题，这可能有助于解决您的问题。尝试

$('#dataTables-example').fnFilter('value1');

之后

$('#dataTables-example').dataTable({ your code... });

括号中的值 1 是您必须以 .net 格式写入的获取值。

Answer 2

我自己想出来了。我需要做的是检索查询字符串值，然后设置下拉值并重绘 table 数据。请参阅下面的代码，希望对其他人有所帮助。

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

        function getParameterByName(name) {
            name = name.replace(/[\[]/, "\[").replace(/[\]]/, "\]");
            var regex = new RegExp("[\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
            return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
        }

        var trust = getParameterByName('trust');
        //alert(trust);

        //$.fn.dataTable.ext.legacy.ajax = true;
        $('#dataTables-example').dataTable({
            "columnDefs": [
                            { "width": "1%", "targets": 0, "orderable": false },
                            { "width": "5%", "targets": 1 },
                            { "width": "10%", "targets": 2 },
                            { "width": "5%", "targets": 3 },
                            { "width": "1%", "targets": 4 },
                            { "width": "1%", "targets": 5 },
                            { "width": "1%", "targets": 6 },
                            { "width": "1%", "targets": 7, "orderable": false }
                          ]
                          ,
            initComplete: function () {
                var api = this.api();

                api.columns().indexes().flatten().each(function (i) {
                    var column = api.column(i);


                    if (i == 1 || i == 2 || i == 3) {
                        //alert("2");

                        var select = $('<select style="width: 170px;"><option value="">Select</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) {

                            if (i == 2) {
                                //Decode ampersand
                                var decoded = d.replace(/&amp;/g, '&');

                                if (decoded == trust) {
                                    select.append('<option value="' + d + '" selected>' + d + '</option>')

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

                                }
                                else {
                                    select.append('<option value="' + d + '">' + d + '</option>')
                                }

                            }
                            else {
                                select.append('<option value="' + d + '">' + d + '</option>')
                            }

                        });

                    }

                });

            }
        });

    });
</script>

通过传递参数筛选 JQuery 数据表

Filter JQuery Datatable By Passing Parameter

asp.net-mvc

jquery

jquery-datatables