CODEWITHSUNDEEP
jquerydatatables-1.10
Mike
Mike

Reputation: 1938

My individual column searching in DataTables is not working

I have the table rendering correctly and am using fixed header and footer, and server side processing. I've added the Individual column searching (text inputs) based on what I found here. However, no matter which filter box I type into all of them search only on the ID (the first column) and not on the column that they are under.

Here's how I initialize the 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();
          }
        });
      });
    }
  });
});

Am I doing something wrong with this?

Upvotes: 0

Views: 2128

Answers (1)

Maxime
Maxime

Reputation: 8989

Debugging your code is almost impossible because pieces are missing. Instead of debugging it for you, I will tell you what I would do.

Understanding what the problems could be:

1) Your JavaScript is not doing what you think it should do. (I would guess that is the problem)

2) Your server side code (PHP) is not doing what you think it should do.

Validating what is really going wrong with your code:

1) Did you open the inspector in Chrome and validate that you don't have any JavaScript error in your code. If you have errors, start by editing your code to remove every error. Then, if the problem still occurs, go to step 2!

2) I would then output to a file what I get from the DataTable AJAX request. You can change ServerSide.php by adding this at the top of your file :

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

Then, open the file and search for the text you entered in the search box.

3) If you passed step 2 with success, we need to check if what are the results we get from the server side processing. Simply change the end of the file from:

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;

This will add the JSON output to a log file. Open it and check if the results you see in there are what your are expecting.

4) It's time to check the results! If you don't receive the search filter value, there is a problem with your JavaScript. If you receive the search filter but return the wrong output, there is a problem with the PHP code on the server side.

I hope it helped!

Note that you can do the exact same thing by using the "Network" tab in the Chrome inspector.

Update: I see in your JavaScript code that you use a "POST" to send your data to the server. I also see here on the last line of the server side code that it is using a "GET" ($_GET) to read what is sent from the web page. If you are using this code, note that you should use $_POST in the PHP to retrieve the parameters correctly.

Upvotes: 2

Related Questions