Jquery数据表：对服务器端数据应用搜索筛选

在服务器端模式下没有过滤数据，如何过滤？
密码：

<!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并拉取数据。但是我写了一个非常基本的代码来轻松地向你解释这个问题。这里，服务器端模式是开的。并且它不过滤数据。如果我用服务器端模式没有得到数据，它就是过滤。那么如何在服务器端模式下过滤数据呢？他需要在搜索输入中编写过滤器。例如，他应该带“巴图汉”的。

您必须调用服务器端处理将发生的端点。
这是我在设置https://codewithmukesh.com/blog/jquery-datatable-in-aspnet-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);
        },
      },

然后在端点中检索post中的变量并进行筛选
下面示例是c#，但根据需要修改为您的语言。
下面是同一个项目的整个后端控制器。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();

Jquery数据表：对服务器端数据应用搜索筛选

1条答案

相关问题

热门标签

最新问答