简体   繁体   中英

Disable specific columns search on datatable with Asp.Net MVC Entity Framework data

I'm getting some data into my jQuery datatable from a database created with entity framework code first, using Asp.Net MVC. So for every record in the database there is also the "delete, detail, edit" links generated by the scaffolder. The search works also for those links. So, how can I allow search only for a specific column, or/and disable it for other specific columns? And in this case, how can I also disable sorting for this specific column (delete, details, edit)?

I am using Asp.Net Core, just for extra information.

The code:

div class="row">
<div class="col-sm-12">
    <p>
        <a asp-action="Create">Create New</a>
    </p>
    <div class="panel panel-default">
        <div class="panel panel-heading">
            Reports
        </div>
        <div class="panel-body">
            <div class="table-responsive">
                <table class="table table-hover table-responsive" id="dataTables">
                    <thead>
                        <tr>
                            <th>
                                @Html.DisplayNameFor(model => model.Description)
                            </th>

                            <th>
                                @Html.DisplayNameFor(model => model.RepFile)
                            </th>                                

                            <th class="col-sm-2"></th>
                        </tr>
                    </thead>
                    <tbody>
                        @foreach (var item in Model)
                        {
                            <tr>
                                <td>
                                    @Html.DisplayFor(modelItem => item.Description)
                                </td>

                                <td>
                                    @Html.DisplayFor(modelItem => item.RepFile)
                                </td>

                                <td>
                                    <a asp-action="Edit" asp-route-id="@item.ID">Edit</a> |
                                    <a asp-action="Details" asp-route-id="@item.ID">Details</a> |
                                    <a asp-action="Delete" asp-route-id="@item.ID">Delete</a>
                                </td>
                            </tr>
                        }
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    </div>
</div>

@section scripts{

<script>
    $(document).ready(function () {
        $('#dataTables').DataTable({
            responsive: true
        });
    });
</script>

}

In standard jQuery Datatables , the filtering is done on the client side and the search works on all rows and columns.

You can customise the configuration by defining proprieties (like searchable and orderable ) for each columns:

 $('#example').dataTable({ "columns": [{ "searchable": true, "orderable": true }, { "searchable": true, "orderable": true }, { "searchable": true, "orderable": true }, { "searchable": false, "orderable": false }, { "searchable": false, "orderable": false }, { "searchable": false, "orderable": false }, ] }) 
 <script src="https://cdn.datatables.net/u/bs/jq-2.2.3,dt-1.10.12/datatables.min.js"></script> <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <link href="https://cdn.datatables.net/u/bs/jq-2.2.3,dt-1.10.12/datatables.min.css" rel="stylesheet" /> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <table id="example" class="display" cellspacing="0" width="100%"> <thead> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </thead> <tfoot> <tr> <th>Name</th> <th>Position</th> <th>Office</th> <th>Age</th> <th>Start date</th> <th>Salary</th> </tr> </tfoot> <tbody> <tr> <td>Tiger Nixon</td> <td>System Architect</td> <td>Edinburgh</td> <td>61</td> <td>2011/04/25</td> <td>$320,800</td> </tr> <tr> <td>Garrett Winters</td> <td>Accountant</td> <td>Tokyo</td> <td>63</td> <td>2011/07/25</td> <td>$170,750</td> </tr> <tr> <td>Ashton Cox</td> <td>Junior Technical Author</td> <td>San Francisco</td> <td>66</td> <td>2009/01/12</td> <td>$86,000</td> </tr> <tr> <td>Cedric Kelly</td> <td>Senior Javascript Developer</td> <td>Edinburgh</td> <td>22</td> <td>2012/03/29</td> <td>$433,060</td> </tr> <tr> <td>Airi Satou</td> <td>Accountant</td> <td>Tokyo</td> <td>33</td> <td>2008/11/28</td> <td>$162,700</td> </tr> <tr> <td>Brielle Williamson</td> <td>Integration Specialist</td> <td>New York</td> <td>61</td> <td>2012/12/02</td> <td>$372,000</td> </tr> <tr> <td>Herrod Chandler</td> <td>Sales Assistant</td> <td>San Francisco</td> <td>59</td> <td>2012/08/06</td> <td>$137,500</td> </tr> </tbody> </table> 

You can archieve that by using optional parametters when configuring the datatable.

For order : columns.orderable .

From DataTables

Description Using this parameter, you can remove the end user's ability to order upon a column. This might be useful for generated content columns, for example if you have 'Edit' or 'Delete' buttons in the table.

Another example thread for searching here

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM