Add radiobutton as search with serverside:true

Add radiobutton as search with serverside:true

StgrStgr Posts: 5Questions: 1Answers: 0

Hi I'm trying to figure out how to add radio button as extra filter for the search field but have only managed to get it to work with serverside:false.
See here: http://jsfiddle.net/9dqobatd/1/

Can anyone help trying to figure out how to add the value from the selected radio button to the search filter?
I'm running latest version 1.10

best regards Steffen

Replies

  • kthorngrenkthorngren Posts: 2,065Questions: 18Answers: 451

    Does your server side script support column searches?

    Kevin

  • StgrStgr Posts: 5Questions: 1Answers: 0

    Yes it does..

    The radiobutton's are in a table just before the user_data table.
    Would it be possible to get the value from the radio buttons from the serverside?

    index.php

    <table style="float:right;">
        <tbody>
            <tr>
                <td>Filter search: </td>
                <td align="center"><input name="radio" type="radio" class="column_filter" id="active" value="allactive">Active</td>
                <td align="center"><input name="radio" type="radio" class="column_filter" id="inactive" value="allinactive">Inactive</td>
                <td align="center"><input name="radio" type="radio" class="column_filter" id="all" value="all" checked="checked">All</td>
            </tr>
        </tbody>
    </table>
    <table id="user_data" width="100%" class="table table-bordered table-striped" >
        <thead>
            <tr>
                <th >ID</th>
                <th >Name</th>
                <th >Phone</th>
                <th >Country</th>
                <th >Status</th>
            </tr>
        </thead>
    </table>
    <script type="text/javascript" language="javascript" >
    
        $(document).ready(function(){
    
            var dataTable = $('#user_data').DataTable({
                "processing":true,
                "serverSide":true,
                "ordering":false,
                "ajax":{
                    url:"fetch.php",
                    type:"POST"
                }
            });
        });
    </script>
    

    fetch.php

    $query = '';
    $output = array();
    $query .= "SELECT * FROM db";
    
    if(isset($_POST["search"]["value"]))
    {
        $query .= 'WHERE name LIKE "%'.$_POST["search"]["value"].'%" ';
        $query .= 'OR phone LIKE "%'.$_POST["search"]["value"].'%" ';
    }
    $query .= 'ORDER BY in_date Asc ';
    if($_POST["length"] != -1)
        {
            $query .= 'LIMIT ' . $_POST['start'] . ', ' . $_POST['length'];
        }
    $statement = $connection->prepare($query);
        $statement->execute();
        $result = $statement->fetchAll();
        $data = array();
        $filtered_rows = $statement->rowCount();
        foreach($result as $row)
        {
            $sub_array = array();
            $sub_array[] = $row["id"];
            $sub_array[] = $row["name"];
            $sub_array[] = $row["phone"];
            $sub_array[] = $row["country"];
            $sub_array[] = $row["Status"];
            $data[] = $sub_array;
        }
        $output = array(
            "draw"    => intval($_POST["draw"]),
            "recordsTotal"  =>  $filtered_rows,
            "recordsFiltered" => get_total_all_records(),
            "data"    => $data
        );
        echo json_encode($output);
    
  • colincolin Posts: 73Questions: 0Answers: 14

    Hi Steffen,

    It doesn't look like you're passing the radio button setting through to your server-side script - the Ajax settings aren't being modified.

    This example here shows custom values being passed to the server. So for you, you'd set the radio button setting in the Ajax data block, allowing the server script to perform that filtering before the data is sent back.

    Hope that helps,

    Cheers,

    Colin

  • StgrStgr Posts: 5Questions: 1Answers: 0

    Thx Colin...
    No you are right, I wasn't, but also I where not aware what to search for and how to do it, but your link sent me in the right direction, so thank you.. :smiley:

    Index.php

    $('.column_filter').on( 'change', function () {
        var i =$(this).attr('data-column');
        var v =$(this).val();
        dataTable.columns(i).search(v).draw();
    } );
    

    fetch.php

    if(!empty($requestData['columns'][12]['search']['value']) )
    {
        $query .= 'status LIKE "%'.$requestData['columns'][12]['search']['value'].'%" AND ';
    }    
    
Sign In or Register to comment.