Question

我需要一个在mvc核心中DataTables的（服务器端处理）SearchPanes实现的示例

在link中，我有一个实现数据表的示例，该数据表包括诸如排序，分页和搜索之类的操作，但有关searchPanes的实现，请帮助我

Answer 1

您可以使用Juery Ajax调用MVC操作方法并加载数据，然后设置JQuery DataTable的“ searchPanes”，“ columnDefs”和“ dom：'Pfrtip'”属性以实现SearchPanes函数。示例代码如下：

Action方法中的代码：

    [HttpPost]
    public JsonResult GetData()
    {
        List<Employee> employees = new List<Employee>()
        {
            new Employee(){ DT_RowId="row_1", First_Name="Tiger", Last_Name="Nixon", Position="System Architect", Email="t.nixon@datatables.net", Office="Edinburgh", Extn="5421", Age="61", Salary="320800", Start_date="2011-04-25"},
            new Employee(){ DT_RowId="row_2", First_Name="Garrett", Last_Name="Winters", Position="Office Manager", Email="t.nixon@datatables.net", Office="London", Extn="7580", Age="61", Salary="13800", Start_date="2011-04-25"},
            new Employee(){ DT_RowId="row_3", First_Name="Timothy", Last_Name="Mooney", Position="System Architect", Email="t.nixon@datatables.net", Office="San Francisco", Extn="5384", Age="61", Salary="85675", Start_date="2011-04-25"},
            new Employee(){ DT_RowId="row_4", First_Name="Unity", Last_Name="Butler", Position="Marketing Designer", Email="t.nixon@datatables.net", Office="San Francisco", Extn="9421", Age="61", Salary="452500", Start_date="2011-04-25"},
            new Employee(){ DT_RowId="row_5", First_Name="Vivian", Last_Name="Harrell", Position="Financial Controller", Email="t.nixon@datatables.net", Office="London", Extn="7439", Age="61", Salary="67500", Start_date="2011-04-25"},
        };
         
        return Json(employees);
    }

查看页面中的代码：

<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/searchpanes/1.1.1/css/searchPanes.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/select/1.3.1/css/select.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/searchpanes/1.1.1/js/dataTables.searchPanes.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.1/js/dataTables.select.min.js"></script>

<table id="example" class="display" style="width:100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Extn.</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
    </table>

jQuery脚本：

<script>
        $(document).ready(function () {
            $(function () {
                $.ajax({
                    type: "POST",
                    url: "/Home/GetData", 
                    success: OnSuccess,
                    failure: function (response) {
                        alert(response.d);
                    },
                    error: function (response) {
                        alert(response.d);
                    }
                });
            });
            function OnSuccess(response) {
                $("#example").DataTable(
                    {
                        bLengthChange: true,
                        bFilter: true,
                        bSort: true,
                        bPaginate: true,
                        data: response,
                        searchPanes: {
                            columns: [2, 5],
                            layout: 'columns-2',
                        },
                        columnDefs: [{
                            searchPanes: {
                                show: true
                            },
                            targets: [5]
                        }],
                        dom: 'Pfrtip',
                        columns: [{
                            'data': null, render: function (data, type, row) {
                                // Combine the first and last names into a single table field
                                return data.first_Name + ' ' + data.last_Name;
                            }
                        },
                        { 'data': 'position' },
                        { 'data': 'office' },
                        { 'data': 'extn' },
                        { 'data': 'start_date' },
                        {
                            'data': 'salary',
                            render: $.fn.dataTable.render.number(',', '.', 0, '$')
                        }
                        ]
                    });
            };
        });
    </script>

输出如下：

更多详细信息，请检查以下链接：

Populate jQuery DataTables in Asp.net MVC

JQuery DataTables SearchPanes

DataTables SearchPanes Examples

如何在mvc核心中实现DataTables的（服务器端）SearchPanes

1 个答案: