Jquery 數據表：對服務器端數據應用搜索過濾器
[英]Jquery Datatable: apply search filter on server side data
問題描述
服務器端模式下不過濾數據。 我該如何過濾？
代碼：
<!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>
實際上這些不是我的真實代碼。 但在我的真實代碼中，服務器端模式已打開。 根據我在互聯網上的研究，服務器端模式下的數據過濾存在問題。
在我的真實代碼中，我使用 ajax 連接到 api 並提取數據。 但是我寫了一個非常基本的代碼來輕松地向您解釋這個問題。 在這里，服務器端模式已打開。 並且它不會過濾數據。 如果我沒有使用服務器端模式獲取數據，它正在過濾。 那么serverside模式下如何過濾數據呢？ 他需要在搜索輸入中編寫過濾器。 例如，他應該帶'batuhan'的。
1 個解決方案
解決方案1
0 2022-12-07 16:06:03
您必須調用將發生服務器端處理的端點。
這是我必須設置它時遵循的教程https://codewithmukesh.com/blog/jquery-datatable-in-as.net-core/
這是 c# 但修改為您正在使用的任何服務器端語言。
這是我做的一個項目的整個數據表實現。 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);
},
},
然后在您的端點中從帖子中檢索變量並進行過濾
下面的示例是 c#，但請根據需要修改為您的語言。
這是同一項目的整個后端 controller。 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();
無法使用Scroller Extension jQuery Datatable加載服務器端數據
[英]Unable to load server side data using Scroller Extension jQuery Datatable
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.