Filter button for row by specific column

Filter button for row by specific column

MazecMazec Posts: 48Questions: 2Answers: 0

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');} 
              },

                } );

            } );

Replies

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • MazecMazec Posts: 48Questions: 2Answers: 0

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    See example here.

  • MazecMazec Posts: 48Questions: 2Answers: 0
    edited 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 => '????'
        );
    
  • MazecMazec Posts: 48Questions: 2Answers: 0
    edited 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.

  • MazecMazec Posts: 48Questions: 2Answers: 0

    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>
    
  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    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

  • MazecMazec Posts: 48Questions: 2Answers: 0

    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.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

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

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • MazecMazec Posts: 48Questions: 2Answers: 0
    edited 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.

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

  • MazecMazec Posts: 48Questions: 2Answers: 0
    edited 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.

  • MazecMazec Posts: 48Questions: 2Answers: 0
    edited 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',
    
    );
    
  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    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

This discussion has been closed.