Question

我正在构建一个ASP.Net MVC 5 Web应用程序，它使用JQuery Datatables（1.10.4）在我的一个Razor Views中显示表格数据。因为该表只显示最多300条记录，所以所有记录都会立即显示，即没有Ajax / JSon用于根据需要提取数据。

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

<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... });

括号中的

value1是你必须用.net格式写的get值。

Answer 2

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

<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数据表

2 个答案: