DataTables에서 검색하는 개별 열이 작동하지 않습니다.

Question

테이블 렌더링이 올바르게되어 있고 고정 머리글과 바닥 글 및 서버 측 처리를 사용하고 있습니다. here을 기반으로 개별 열 검색 (텍스트 입력)을 추가했습니다. 그러나 모든 필터 상자에 어떤 필터 상자를 입력하든 관계없이 ID (첫 번째 열) 만 검색하고 그 아래의 열은 검색하지 않습니다.

$(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(); 
      } 
     }); 
     }); 
    } 
    }); 
}); 

내가이 뭔가 잘못을하고 있습니까 : 여기

내가 DatatTable를 초기화하는 방법은?

Answer 1

조각이 없기 때문에 코드 디버깅이 거의 불가능합니다. 디버깅 대신에 내가 할 일을 알려줄 것입니다.

문제가 될 수 있는지 이해 :

1) 귀하의 자바 스크립트 당신이해야 할 무슨 생각을하고 있지 않습니다. (그게 문제라고 생각합니다)

2) 귀하의 서버 측 코드 (PHP)는 사용자가해야한다고 생각하는 것을하지 않습니다.

정말 코드로 잘못 무슨 일이 일어나고 있는지 검증 :

1)은 크롬에서 관리자를 열고 코드에서 자바 스크립트 오류가없는 것을 확인했다. 오류가있는 경우 코드를 편집하여 모든 오류를 제거하십시오. 문제가 계속 발생하면 2 단계로 이동하십시오!

2) 그러면 DataTable AJAX 요청에서 얻은 파일을 출력합니다. 그런 다음

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

을 파일을 열고 검색 창에 입력 한 텍스트를 검색 : 당신은 당신의 파일의 상단에이를 추가하여 ServerSide.php을 변경할 수 있습니다.

3) 성공한 2 단계를 통과 한 경우 서버 측 처리에서 얻은 결과가 무엇인지 확인해야합니다.

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

하려면 : 간단히에서 파일의 끝을 변경

$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"를 사용하여 데이터를 서버로 보았습니다.웹 페이지에서 보낸 내용을 읽으려면 "GET"($_GET)을 사용하는 서버 쪽 코드의 마지막 줄에 here도 표시됩니다. 이 코드를 사용하는 경우 매개 변수를 올바르게 검색하려면 PHP에 $_POST을 사용해야합니다.