Jquery Datatable: apply search filter on server side data
Question
Data is not filtered in server side mode. How can I filter?
code:
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<link rel="stylesheet" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.3.2/css/buttons.dataTables.min.css"/>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css">
</head>
<body>
<h2>HTML Table</h2>
<input type="text" id="myInput" />
<table id="myTable">
<thead>
<tr>
<th>#</th>
<th>@_stringLocalizer["page.Name"]</th>
<th>@_stringLocalizer["page.SurName"]</th>
<th>@_stringLocalizer["page.Gender"]</th>
<th>@_stringLocalizer["page.BloodGroup"]</th>
</tr>
</thead>
<tbody>
<tr>
<td>The table body</td>
<td>with two columns</td>
<td>The table body</td>
<td>with two columns</td>
<td>The table body</td>
</tr>
<tr>
<td>batuhan</td>
<td>batuhan</td>
<td>batuhan</td>
<td>batuhan</td>
<td>batuhan</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.3.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>
<script>
var table = $('#myTable').DataTable({
"bDestroy": true,
serverSide: true,
processing:true,
searching: true,
ajax: function ( data, callback, settings ) {
var out = [];
for ( var i=data.start, ien=data.start+data.length ; i<ien ; i++ ) {
out.push( [ i+'-1', i+'-2', i+'-3', i+'-4', i+'-5' ] );
}
setTimeout( function () {
callback( {
draw: data.draw,
data: out,
recordsTotal: 5000000,
recordsFiltered: 5000000
} );
}, 50 );
},
// columns: [
// { "data": "Id" },
// { "data": "Ad" },
// { "data": "Soyad" },
// { "data": "Cinsiyet" },
// { "data": "KanGrubu" }
// ],
dom: 'B<"clear">lfrtip',
buttons: [ {
extend: 'excelHtml5',
title: 'Hasta_Bilgileri'
},'copy' ],
rowId: 'id',
scrollY: '400px',
scrollCollapse: true,
});
$('#myInput').on( 'keyup', function () {
table.search( this.value ).draw();
} );
</script>
</body>
</html>
actually these are not my real codes. but in my real codes, the server side mode is turned on. and according to my research on the inte.net, there are problems with data filtering in serverside mode.
In my real code, I connect to the api with ajax and pull the data. but I wrote a very basic code to explain the question to you comfortably. Here, the serverside mode is on. and it doesn't filter the data. if i don't get the data with serverside mode it is filtering. So how to filter data in serverside mode? he needs to write the filter in the search input. For example, he should bring 'batuhan' ones.
1 answers
solution1
0 2022-12-07 16:06:03
you have to call an endpoint where the server side processing will occur.
this is the tutorial I followed when I had to set it up https://codewithmukesh.com/blog/jquery-datatable-in-as.net-core/
this is c# but modify to whatever server side language you are using.
here is the whole datatable implementation for a project I did. https://github.com/bryandellinger/minerals/blob/main/minerals/src/accounting/managePayments/initDataTable.js
processing: true,
serverSide: true,
filter: true,
ajax: {
url: './api/RoyaltyPaymentDataTableApi',
type: 'POST',
datatype: 'json',
data(data) {
data.from = $('#from').val();
data.to = $('#to').val();
data.paymentTypeId = parseInt($('#paymentTypeDropDownId').val(), 10);
},
},
then in your endpoint retrieve the variables from the post and do your filtering
the example below is c# but modify to your language as needed.
here is the entire backend controller for the same project. https://github.com/bryandellinger/minerals/blob/main/minerals/Controllers/RoyaltyPaymentDataTableApiController.cs
var draw = Request.Form["draw"].FirstOrDefault();
var start = Request.Form["start"].FirstOrDefault();
var length = Request.Form["length"].FirstOrDefault();
var paymentTypeId = Request.Form["paymentTypeId"].FirstOrDefault();
var sortColumn = Request.Form["columns[" + Request.Form["order[0][column]"].FirstOrDefault() + "][name]"].FirstOrDefault();
var sortColumnDirection = Request.Form["order[0][dir]"].FirstOrDefault();
var searchValue = Request.Form["search[value]"].FirstOrDefault();
int pageSize = length != null ? Convert.ToInt32(length) : 0;
int skip = start != null ? Convert.ToInt32(start) : 0;
int recordsTotal = 0;
string to = Request.Form["to"].FirstOrDefault();
string from = Request.Form["from"].FirstOrDefault();
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.