Filter button for row by specific column

Mazec · May 2019

Hi, please help. How to make a button to filter lines. When you click the button, only the lines that have the word "afternoon" in the second column are listed.

I found a script that can do it, but it doesn't work for AJAX database dump. Here's my script.

Thank you all for your advice and help.

            $(document).ready(function() {
                var dataTable = $('#vypisDb').DataTable( {


                    "pageLength": 100,
                    "bInfo" : false,
                    //"order": [[ 7, "desc" ]],
                    "bLengthChange": false,
                    "processing": true,
                    "serverSide": true,


                    "ajax":{
                        url :"data.php", // json datasource
                        type: "post",  // method  , by default get
                        error: function(){  // error handling
                            $(".vypisDb-error").html("");
                            $("#vypisDb-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
                            $("#vypisDb-grid_processing").css("display","none");

                        }
                    },  
                "language": {
                "url": "../../assets/DataTables/dataTables.czech.lang"
                        },

    "paging": true,
    "autoWidth": true,
    "columnDefs": [{ "bSortable": false, "aTargets": ['_all'] },
      {  //      "targets": [0],  
      }],
            rowCallback: function( row, data, index ) {
                if ( data[13] == "OK" ) {$(row).addClass('green');} 
                else if ( data[13] == "Bad" ) {$(row).addClass('orange');}
                else if ( data[13] == "Fail" ) {$(row).addClass('red');} 
              },

                } );

            } );

kthorngren · May 2019

I might be missing it but I don't see the code for the button. I'm assuming you are using something like dataTable.column(1).search('afternoon').draw();.

Since this is server side processing your server script is expected to perform the search and return the correct rows.

Kevin

Mazec · May 2019

Thank you for the tip. I'll try to implement it somehow.

The button is not there yet, it did not work, so I prefer to delete it.

Yes it works like this:
1. The server reads all the data it has, already somehow filtered on the servo side to load just the right lines.
2. On the cliecta side I want these buttons to work better with the table. And it was not necessary to overburden the server with additional queries with this additional filtering.

colin · May 2019

As Kevin said, the button just needs to issue the call dataTable.column(1).search('afternoon').draw(); .You have serverSide so the server would deal that request.

colin · May 2019

See example here.

Mazec · May 2019

"columns": [
      { "data": "what" },
      { "data": "is" },
      { "data": "this" },
      { "data": "?????" },
      { "data": "thanks" },
    ],

How do I know what my data is called? When I write those that are in data.php, it doesn't work for me.

_DataTables warning: table id=fromDb - Requested unknown parameter 'id' for row 0, column 0. For more information about this error, please see http://datatables.net/tn/4_

My data.php
    $ columns = array
    // datatable column index => database column name
    0 => 'is'
    1 => 'this'
    2 => '????'
    );

Mazec · May 2019

Done, I solved the previous problem with alternative column numbering.

The problem is that nothing happens when you click the id #search button.

I apologize for a triple post, but it wasn't possible to send it in whole.

Mazec · May 2019

My JS:

    $(document).ready(function() {
            var dataTable = $('#vypisDb').DataTable( {


                "pageLength": 100,
                "bInfo" : false,
                //"order": [[ 7, "desc" ]],
                "bLengthChange": false,
                "processing": true,
                "serverSide": true,


                "ajax":{
                    url :"data.php", // json datasource
                    type: "post",  // method  , by default get
                    error: function(){  // error handling
                        $(".vypisDb-error").html("");
                        $("#vypisDb-grid").append('<tbody class="employee-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
                        $("#vypisDb-grid_processing").css("display","none");

                    }
                },  
            "language": {
            "url": "../../assets/DataTables/dataTables.czech.lang"
                    },

"paging": true,
"autoWidth": true,
"columnDefs": [{ "bSortable": false, "aTargets": ['_all'] },
  {  //      "targets": [0],  
  }],
  "columns": [

  { "data": 0 },
  { "data": 1 },
  { "data": 2 },
  { "data": 3 },
  { "data": 4 },
  { "data": 5 },
  { "data": 6 },
  { "data": 7 },
  { "data": 8 },
  { "data": 9 },
  { "data": 10 },
  { "data": 11 },
  { "data": 12 },
  { "data": 13 },

],
        rowCallback: function( row, data, index ) {
            if ( data[13] == "OK" ) {$(row).addClass('green');} 
            else if ( data[13] == "Brzy" ) {$(row).addClass('orange');}
            else if ( data[13] == "Zpoždění" ) {$(row).addClass('red');} 
          },

            });

            $('#search').click(function()  {
                dataTable.column(3).search('Suchovody').draw();
            }); 

        });

My HTML:

Search

                            <table class="display" id="vypisDb">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Pobočka</th>
                                        <th>Druh</th>
                                        <th>Typ</th>
                                        <th>Opakování</th>
                                        <th>Poslední kontrola</th>
                                        <th>Příští kontrola</th>
                                        <th>Zodpovědná osoba</th>
                                        <th>Revizní firma</th>
                                        <th>Technik / školitel</th>
                                        <th>Kontakt</th>
                                        <th>Poslední úprava</th>
                                        <th>Upravit</th>
                                        <th style="display:none;">Stav</th>
                                    </tr>
                                </thead>
                            </table>

colin · May 2019

Hi @Mazec ,

That all looks OK. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Mazec · May 2019

I didn't send jsbin because it would be useless. Because it works. http://live.datatables.net/xonixujo/8/

Can't simulate properly. No errors in the console after clicking the button.

Do you have a tip for what it might be?
The table is right, just the button is completely unresponsive.

colin · May 2019

Can you link to your page at least? As you say, it works elsewhere, so it must be something in your page...

kthorngren · May 2019

The table is right, just the button is completely unresponsive.

You have server side processing enabled. When you click the button are you seeing an ajax request sent to your server using the browser's developer tools?

Your server scrip tis responsible for performing the column search.

Kevin

Mazec · May 2019

Classic search with datatables input type search me working fine.
rowCallback as you can see in my code also works.

Therefore I do not understand why this code should not work. What makes it different from classic search? How to create a server side support fort search powered by this button?

I can try to arrange a live demo somehow. I think it will be useless if the server side is the problem.

Very thanks you.

kthorngren · May 2019

Therefore I do not understand why this code should not work. What makes it different from classic search?

What are you using for your server side script? Is it one that is supplied by Datatables?

With server side processing the search parameters are sent as per this doc:
https://datatables.net/manual/server-side

Note there is a global search value and column search values for each column. It could be that your server script only looks at the global search value. For testing, try changing from dataTable.column(3).search('Suchovody').draw(); to dataTable.search('Suchovody').draw();. What happens?

How to create a server side support fort search powered by this button?

The server side script will need to read the column parameter sent and process the search. Without seeing or knowing what you have for the server script its hard to say exactly what the problem is.

Kevin

Mazec · May 2019

I solved it differently: dataTable.data (3) .search ('Suchovody'). Draw ();
That works fine for me. Problem solved, thank you all for your patience.

Why didn't you offer me this solution? Why didn't your solution ~~dataTable.column(3).search('Suchovody').draw();~~ not working for me?

I guess I know why in data.php:
"data" => $data // total data array

I'm glad I came by myself. Kor, when the pros tried to help me. Thanks very much for support.

I no longer know where I took the original server side script, but I think definitely offical. I extended it to more than 500 lines. Anyway, I was looking at github and now the official script looks different.

Mazec · May 2019

EDIT: So it still does not work for a particular column. Both solutions work for all columns.

dataTable.data(0).search('Suchovody').draw();
dataTable.search('Suchovody').draw();

Please have a replacement for dataTable.column(3).search('Suchovody').draw();?

My data.php
// storing request (ie, get/post) global array to a variable
$requestData= $_REQUEST;

$columns = array( 
// datatable column index  => database column name  
    0 => 'column 1 name',
    1 => 'column 2 name', 
    2 => 'column 3 name', 
    3 => 'column 4 name', 
    4 => 'column 5 name',
    5 => 'column 6 name',
    6 => 'column 7 name',
    7 => 'column 8 name',
    8 => 'column 9 name',

);

kthorngren · May 2019

dataTable.column(0).search('Airi').draw();

Works here:
http://live.datatables.net/duselako/1/edit

dataTable.data(0).search('Airi').draw();

This works but it is a global search. Take a look at this example:
http://live.datatables.net/jareyalu/1/edit

Go to the browser's developer tools > network and look at the Headers for the second XHR request. You will see this:

draw: 2
columns[0][data]: 0
columns[0][name]: 
columns[0][searchable]: true
columns[0][orderable]: true
columns[0][search][value]: 
columns[0][search][regex]: false
.......
start: 0
length: 10
search[value]: Airi   <<<global search
search[regex]: false

Which is a global search. Compared to the column search in the first example, which looks like this:

draw: 2
columns[0][data]: 0
columns[0][name]: 
columns[0][searchable]: true
columns[0][orderable]: true
columns[0][search][value]: Airi   <<<column search
columns[0][search][regex]: false
......
start: 0
length: 10
search[value]: 
search[regex]: false

I don't use php so won;'t be much help there. However you can look at the Datatables ssp.class script here:
https://github.com/DataTables/DataTables/blob/master/examples/server_side/scripts/ssp.class.php

Maybe this will help.

Kevin

Filter button for row by specific column

Filter button for row by specific column

Replies

Howdy, Stranger!

Categories

DataTables

Filter button for row by specific column

Filter button for row by specific column

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables