如何将 DataTable 中的单个列搜索与服务器端处理一起使用？

Question

I'm working with a project having large amount of data. I already used server-side processing to process or load data fast. But my boss want to add search in each column , I try to use the multi filter but the data didn't change. How would I fix this problem?

This is the table where I load my data from the database:

<table class="table table-bordered responsive nowrap" id="example" width="100%">    
    <thead> 
        <tr>
            <th width="3%">No</th>
            <th width="30%">Machine</th>
            <th width="15%">Spec1</th>
            <th width="15%">Spec2</th>
            <th width="6%">Spec3</th>
            <th width="6%">Spec4</th>
            <th width="6%">Spec5</th>
            <th width="6%">Spec6</th>
            <th width="6%">Qty</th>
            <th></th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th width="3%">No</th>
            <th width="30%">Machine</th>
            <th width="15%">Spec1</th>
            <th width="15%">Spec2</th>
            <th width="6%">Spec3</th>
            <th width="6%">Spec4</th>
            <th width="6%">Spec5</th>
            <th width="6%">Spec6</th>
            <th width="6%">Qty</th>
            <th></th>
        </tr>
    </tfoot>
</table>

This is script I use to load data from MySQL using PHP and AJAX. I already added multi filter script after ajax but still not working.

$(document).ready(function(){
  //Reading
    var dataTable=$('#example').DataTable({
        "processing": true,
        "serverSide":true,
        "ajax":{
            url:"pages_exe/machine_dt.php",
            type:"POST"
        },
        initComplete: function () {
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
 
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
 
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' );
                } );
            } );
        }
    });
});

This is PHP file to load or get data from my database. machine_dt.php

<?php
include '../environment.php';
include '../config/database.php';

$request=$_REQUEST;
$col =array(
    0   =>  'machid',
    1   =>  'machine',
    2   =>  'spec1',
    3   =>  'spec2',
    4   =>  'spec3',
    5   =>  'spec4',
    6   =>  'spec5',
    7   =>  'spec6',
    8   =>  'qty'
);  //create column like table in database

$sql =" SELECT * FROM machinelist
        /*WHERE qty != 'disable'*/
        ORDER BY machine ASC;";
$query=mysqli_query($db,$sql);

$totalData=mysqli_num_rows($query);

$totalFilter=$totalData;

//Search
$sql =" SELECT * FROM machinelist
        /*WHERE qty != 'disable'*/
        WHERE 1=1
        ";

if(!empty($request['search']['value'])){
    $sql.=" AND (machine Like '%".$request['search']['value']."%' ";
    $sql.=" OR brand Like '%".$request['search']['value']."%' ";
    $sql.=" OR spec2 Like '%".$request['search']['value']."%' ";
    $sql.=" OR spec3 Like '%".$request['search']['value']."%' ";
    $sql.=" OR spec4 Like '%".$request['search']['value']."%'";
    $sql.=" OR spec5 Like '%".$request['search']['value']."%' ";
    $sql.=" OR spec6 Like '%".$request['search']['value']."%' ";
    $sql.=" OR qty Like '%".$request['search']['value']."%' )";
}
$query=mysqli_query($db,$sql);
$totalData=mysqli_num_rows($query);

//Order
$sql.=" ORDER BY ".$col[$request['order'][0]['column']]."   ".$request['order'][0]['dir']."  LIMIT ".
    $request['start']."  ,".$request['length']."  ";

$query=mysqli_query($db,$sql);

$data=array();
$i=1;
while($row=mysqli_fetch_array($query)){
    $subdata=array();

    $subdata[]= $i++;
    $subdata[]=$row[1]; 
    $subdata[]=$row[2]; 
    $subdata[]=$row[3]; 
    $subdata[]=$row[4]; 
    $subdata[]=$row[5];  
    $subdata[]=$row[6]; 
    $subdata[]=$row[7];
    $subdata[]=$row[8];
    $subdata[]='<button type="button" class="btn btn-primary btn-sm" id="update" data-id="'.$row[0].'" >Edit</button>
                <button type="button" class="btn btn-danger btn-sm" id="delete" data-id="'.$row[0].'" >Delete</button>';
    $data[]=$subdata;
}

$json_data=array(
    "draw"              =>  intval($request['draw']),
    "recordsTotal"      =>  intval($totalData),
    "recordsFiltered"   =>  intval($totalFilter),
    "data"              =>  $data
);

echo json_encode($json_data);

?>

Answer 1

$sql.=" AND (machine Like '%".$request['search']['value']."%' ";
$sql.=" OR brand Like '%".$request['search']['value']."%' ";
$sql.=" OR spec2 Like '%".$request['search']['value']."%' ";
$sql.=" OR spec3 Like '%".$request['search']['value']."%' ";
$sql.=" OR spec4 Like '%".$request['search']['value']."%'";
$sql.=" OR spec5 Like '%".$request['search']['value']."%' ";
$sql.=" OR spec6 Like '%".$request['search']['value']."%' ";
$sql.=" OR qty Like '%".$request['search']['value']."%' )";

is OK for toy projects. But it will not scale much past a thousand rows.

If your boss needs both flexibility and performance at scale, then you need to change the question to something more like

How can I do a text search of multiple columns efficiently?

To that question, you will be presented with a discussion FULLTEXT indexing and combining the columns into a single column.