Мой индивидуальный поиск столбцов в DataTables не работает

Question

У меня есть рендеринг таблицы правильно, и я использую фиксированный верхний и нижний колонтитулы и обработку на стороне сервера. Я добавил индивидуальный поиск столбцов (текстовые входы) в зависимости от того, что я нашел here. Однако независимо от того, какой ящик фильтра я набираю во всех них, поиск выполняется только по идентификатору (первый столбец), а не по столбцу, в котором они находятся.

Вот как я инициализировать DatatTable:

$(document).ready(function() { 

    // Setup - add a text input to each footer cell 
    $('#DataTable tfoot th').each(function() { 
     var title = $(this).text(); 
     $(this).html('<input type="text" placeholder="Search ' + title + '" />'); 
    }); 

    var table = $('#DataTable').DataTable({ 
      "lengthMenu" : [[25, 50, 75, 100, 150], [25, 50, 75, 100, 150]], 
      "dom" : '<"top"Bilp<"clear">>rt<"bottom"ip<"clear">>', 
      "buttons" : [{ 
        extend : 'collection', 
        text : 'Selection', 
        buttons : ['selectAll', 'selectNone'] 
       }, { 
        extend : 'collection', 
        text : 'Export', 
        buttons : ['excel', 'csv', 'pdf'] 
       } 
      ], 
      "fixedHeader" : { 
       header : true, 
       footer : true 
      }, 
      "select" : true, 
      "processing" : true, 
      "serverSide" : true, 
      "ajax" : { 
       "url" : "./ServerSide.php", 
       "type": "POST" 
      }, 
    initComplete: function() { 
     var api = this.api(); 

     // Apply the search 
     api.columns().every(function() { 
     var that = this; 

     $('input', this.footer()).on('keyup change', function() { 
      if (that.search() !== this.value) { 
      that 
       .search(this.value) 
       .draw(); 
      } 
     }); 
     }); 
    } 
    }); 
}); 

я делаю что-то неправильно с этим?

Answer 1

Отладка вашего кода практически невозможна, потому что части отсутствуют. Вместо того, чтобы отлаживать его для вас, я расскажу вам, что я буду делать.

Понимание того, что может быть проблемы:

1) Ваш JavaScript не делать то, что вы думаете, он должен делать. (Я бы догадался, что проблема)

2) Ваш код на стороне сервера (PHP) не делает то, что вы думаете, что он должен делать.

Проверка того, что на самом деле происходит не так с вашим кодом:

1) вы откройте инспектор в Chrome и проверить, что у вас нет какой-либо ошибки JavaScript в вашем коде ли. Если у вас есть ошибки, начните с редактирования кода, чтобы удалить каждую ошибку. Затем, если проблема все еще возникает, перейдите к шагу 2!

2) Затем я вывел бы файл, который я получаю из запроса DataTable AJAX. Вы можете изменить ServerSide.php, добавив это в верхней части файла:

file_put_contents("request.log", var_export($_REQUEST)); 

Затем откройте файл и поиск введенного текста в поле поиска.

3) Если вы успешно прошли шаг 2, нам нужно проверить, какие результаты мы получаем от обработки на стороне сервера. Просто измените конец файла от:

echo json_encode(
    SSP::simple($_GET, $sql_details, $table, $primaryKey, $columns) 
); 

To:

$jsonData = json_encode(SSP::simple($_GET, $sql_details, $table, $primaryKey, $columns)); 
file_put_contents("output.log", $jsonData); 
echo $jsonData; 

Это добавит вывод JSON в лог-файл. Откройте его и проверьте, есть ли результаты, которые вы видите там, что вы ожидаете.

4) Пришло время проверить результаты! Если вы не получили значение фильтра поиска, возникает проблема с вашим JavaScript. Если вы получаете фильтр поиска, но возвращаете неверный результат, возникает проблема с кодом PHP на стороне сервера.

Надеюсь, это помогло!

Обратите внимание, что вы можете сделать то же самое, используя вкладку «Сеть» в инспекторе Chrome.

Обновление: Я вижу в вашем JavaScript-коде, что вы используете «POST» для отправки своих данных на сервер.Я также вижу here в последней строке кода на стороне сервера, что он использует «GET» ($_GET), чтобы читать то, что отправлено с веб-страницы. Если вы используете этот код, обратите внимание, что вы должны использовать $_POST в PHP для правильного извлечения параметров.