Arianit Arianit - 5 months ago 38
Javascript Question

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>


}

Answer

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

You can 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>

Comments