Jquery 数据表：对服务器端数据应用搜索过滤器
[英]Jquery Datatable: apply search filter on server side data
问题描述
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.在我的真实代码中，我使用 ajax 连接到 api 并提取数据。 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?那么serverside模式下如何过滤数据呢？ he needs to write the filter in the search input.他需要在搜索输入中编写过滤器。 For example, he should bring 'batuhan' ones.例如，他应该带'batuhan'的。
1 个解决方案
解决方案1
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/这是我必须设置它时遵循的教程https://codewithmukesh.com/blog/jquery-datatable-in-as.net-core/
this is c# but modify to whatever server side language you are using.这是 c# 但修改为您正在使用的任何服务器端语言。
here is the whole datatable implementation for a project I did.这是我做的一个项目的整个数据表实现。 https://github.com/bryandellinger/minerals/blob/main/minerals/src/accounting/managePayments/initDataTable.js 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.下面的示例是 c#，但请根据需要修改为您的语言。
here is the entire backend controller for the same project.这是同一项目的整个后端 controller。 https://github.com/bryandellinger/minerals/blob/main/minerals/Controllers/RoyaltyPaymentDataTableApiController.cs 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();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.