使用 Ajax 手动搜索数据表答案

【问题标题】：Datatable Manual Search with Ajax使用 Ajax 手动搜索数据表
【发布时间】：2021-08-28 07:10:06
【问题描述】：

我将 Datatable 与 Ajax 一起使用...我想手动搜索库仑，但我做不到。

Datatable 工作没问题...一切正常...但我无法处理手动搜索。请问有人可以帮我吗？

我尝试的是：

<table id="tedarik_data"  class="table table-bordered table-hover table-sm table-striped " width=100%>
<thead>
<tr>
   <th><input type="text" id="soyisim_ara" class="form-control form-control-sm" placeholder="Soyisim Ara..."></th>
<th><input type="text" id="birim_ara" class="form-control form-control-sm" placeholder="Search..."></th>
<th>Güncelle</th>
<th>Sil</th>
</tr>
</thead>

<script>
$('#birim_ara').on( 'keyup', function () {
  birim_ara= this.value ;
  DataTable.draw();
});


var DataTable = $('#tedarik_data').DataTable({
"processing":true,
"serverSide":true,
"order":[],
"ajax":{
url:"team/fetch.php",
type:"POST",
data:{birim_ara:birim_ara}
},
"columnDefs":[{"targets":[0,1,2,3,4,5,6,7,8,9],"orderable":false,"searchable": true}],
"paging": false,
"searching": false,
"autoWidth": true,
"dom": '<"top"lp<"clear">>rt<"bottom"ifp<"clear">>'
});

</script>

以及下面的 team/fetch.php 文件；

<?php
include('../db.php');
include('function.php');
$birim_ara = $_POST['birim_ara'];
$query = "SELECT * FROM team WHERE birim LIKE ? ";
$params = array("%$birim_ara%");
$output = array();
$statement = $connection->prepare($query);
$statement->execute($params);
$result = $statement->fetchAll();
$data = array();
$filtered_rows = $statement->rowCount();
    foreach($result as $row)
    {
        
        $sub_array = array() ;
        $sub_array[] = $row["isim"];
        $sub_array[] = $row["birim"];

    
        $sub_array[] = '<button type="button" name="update" id="'.$row["id"].'" class="btn btn-warning btn-sm updatemusteri">Update</button>';
        $sub_array[] = '<button type="button" name="delete" id="'.$row["id"].'" class="btn btn-danger btn-sm tedarikdelete">delete</button>';
        $data[] = $sub_array;
    }
    $output = array(
        "draw"              =>  intval($_POST["draw"]),
        "recordsTotal"      =>  $filtered_rows,
        "recordsFiltered"   =>  get_total_all_records(),
        "data"              =>  $data
    );
    echo json_encode($output);
    ?>

【问题讨论】：

警告：您的代码容易受到 SQL 注入攻击。您应该使用准备好的语句和参数来帮助防止攻击者通过使用恶意输入值来破坏您的数据库。 bobby-tables.com 给出了风险解释，以及如何使用 PHP / mysqli / PDO 安全地编写查询的一些示例。切勿将未经处理的数据直接插入您的 SQL 中。按照您现在编写代码的方式，有人可以很容易地窃取、错误更改甚至删除您的数据，或者只是通过简单的' 来破坏您的查询。
无论如何，你需要澄清你的问题。 couldnt do it 让我们不知道您的代码实际发生了什么。当您尝试运行搜索时，具体出了什么问题？您是否收到任何 Javascript 或 PHP 错误？还是 AJAX 问题？实际上你做了什么调试？您需要更准确地了解该问题。我们无法运行您的代码来查看发生了什么，我们只能盯着它并寻找潜在的问题，但这通常并不能说明全部情况。
请你举个例子.. 我不太了解安全性。如果你帮助我，我将不胜感激谢谢...
我只是给了你一个链接到一个有例子的地方。
'data': function(data){ var gender = $('#searchByGender').val(); var name = $('#searchByName').val(); data.searchByGender = 性别； data.searchByName = 名称； }

标签： javascript php sql ajax datatables

【解决方案1】：

我修改了脚本如下：数据发送方法很重要...

<script>

var dataTable = $('#team_data').DataTable({
"language": {
"lengthMenu": "Sayfa Başına _MENU_ ürün Göster",
"zeroRecords": "Aradığınız Kriterlere uygun Tedarikçi Bulunamadı, Özür Dileriz!",
"info": "",
"infoEmpty": "Hiç Bir Kayıt Uygun Değil",
"infoFiltered": "(_TOTAL_  Tedarikçi arasından _MAX_ Tedarikçi filtrelendi)",
"search": "Tedarikçiler Arasında Ara",
"paginate": {
"previous": "Önceki ",
"next": "Sonraki "
}},
"processing":true,
"serverSide":true,
"order":[],
'serverMethod': 'post',
'ajax': {
       'url':'team/fetch.php',
       'data': function(data){
          var soyisim_ara= $('#soyisim_ara').val();
          var birim_ara= $('#birim_ara').val();
          data.soyisim_ara= soyisim_ara;
          data.birim_ara= birim_ara;
       }
    },
"columnDefs":[{"targets":[0,1,2,3,4,5,6],"orderable":false,"searchable": true}],
"paging": true,
"searching": true,
"autoWidth": true,
"dom": '<"top"lp<"clear">>rt<"bottom"ifp<"clear">>'
});
$('#soyisim_ara').keyup(function(){
    dataTable.draw();
  });

  $('#birim_ara').change(function(){
    dataTable.draw();
  });
</script>

【讨论】：