Add radio button as filter/search with server side processing

Stgr

Hi I’ve managed to add radio buttons to the search functionality on one of the example tables on this side with success, but cannot make it work on my homepage where serverside is set to true.

I have a hidden column with text like all/allactive/allinactive and my goal is to be able to filter with both radio buttons and the search field. So the radio button allactive is selected, then only active rows are showed, and so on.

I think it’s because of the server side, and I’m almost all out of ideas, how do I add this skates search option??

I’m using latest version 1.10

kthorngren

Are you performing a column search based on the radio button selection?

Assuming you are then that search should be sent in the request to the server. Is your server code setup to handle this search?

Maybe you can provide more details / code showing what you are doing.

Kevin

Stgr

Hi Kevin,

Yes the radiobutton's value will be the search criteria and it looks at column 12 (a hidden column) the server side is only set up to handle the builtin search field, but im not familier enough with php/javascript to make it add that as a parameter.
The example I tried worked just fine with both search bar and the radiobutton at the same time, so im pretty sure it is because it is missing the radiobutton as search criteria.

the below code has been truncated a bit, but the important stuff is there, and anonymized..

The index.php

<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>

<script type="text/javascript" language="javascript" >

function filterColumn () {
    $('#user_data').DataTable().column( 12 ).search(
        $("input:radio[name=radio]:checked").val()
    ).draw();
}

$(document).ready(function(){

       var dataTable = $('#user_data').DataTable({
            "processing":true,
            "serverSide":true,
            "ordering":false,
            "createdRow": function ( row, data, index ) {
                if ( data[4] == 0 ) {
                    $('td', row).eq(4).addClass('danger');
                }
            },
            "ajax":{
                url:"fetch.php",
                type:"POST"
            },
            "columnDefs":[
                {
                    "targets":[ 12 ],
                    "visible":false,
                },
            ],
        });

$('input.column_filter').on( 'keyup click', function () {
            filterColumn( $(this).parents('tr').attr('data-column') );
        } );
});
</script>

and this is what happens in the fetch

$query = "select * from db";
if(isset($_POST["search"]["value"]))
    {
        $query .= 'WHERE name LIKE "%'.$_POST["search"]["value"].'%" ';
    }
$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["column1"];
        $sub_array[] = $row["column2"];
        $sub_array[] = $row["......"];
        $sub_array[] = $row["column11"];
        $sub_array[] = $row["column12"];
        $data[] = $sub_array;
 }       
$output = array(
        "draw"    => intval($_POST["draw"]),
        "recordsTotal"  =>  $filtered_rows,
        "recordsFiltered" => get_total_all_records(),
        "data"    => $data
    );
    echo json_encode($output);