过滤JQuery的数据表传递参数 [英] Filter JQuery Datatable By Passing Parameter

问题描述

我建立它使用JQuery数据表（1.10.4）到我的剃刀视图之一中显示表格数据的ASP.Net MVC 5 Web应用程序。由于该表将只显示300的最大记录，所有记录都显示一次，即没有阿贾克斯/ JSON用来拉在每个需要的基础数据。

I'm building an ASP.Net MVC 5 web application which using JQuery Datatables (1.10.4) to display tabular data within one of my Razor Views. Because the table will only ever display max 300 records, all the records are displayed at once, i.e., no Ajax/ JSon used to pull data on a per need basis.

我已经使用这个 https://datatables.net/examples/api/multi_filter_select.html 添加下拉菜单的一些数据表列，以便过滤。这很好地工作（见下文code）。

I have used this https://datatables.net/examples/api/multi_filter_select.html to add drop down menus to some of Datatable columns to allow for filtering. This works nicely (see code below).

<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：//本地主机：55437 /移值1 = testValue ，我希望用该查询字符串值（值），它使数据表数据自动过滤根据从查询字符串收到的值传递给下拉过滤器之一。这是否有意义？

My problem is that when the page loads, I pass a value in the querystring http://localhost:55437/Shift?value1=testValue, I wish to use that querystring value (Value1) and pass it to one of the drop down filters so that the Datatable data automatically filters based on the value received from the querystring. Does this make sense?

如果是这样，可能有人请帮助我如何做到这一点？

If so, could someone please help me on how to do this?

非常感谢。

推荐答案

我理解了它自己。我需要做的是检索查询字符串值，然后设置下拉价值和重绘表数据。见code以下，希望它可以帮助别人。

I figured it out myself. What I needed to do was retrieve the querystring value then set the drop down value and redraw the table data. See code below, hopefully it helps someone else.

<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的数据表传递参数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！