What is the Purpose of columns[i][search][value] ?

prem2

Dear team,

I am using the jquery datatable for one of my project. I am integrating the column based search in server side. But, i don't know what is the purpose of using the column [inxex][search][value]. Because, whenever i am using the below code all column[index][search][value] passes the same value in ajax.

oTables.columns().eq( 0 ).each( function ( colIdx ) {
        $( 'input', oTables.column( colIdx ).footer() ).on( 'keyup change', function () {
            oTables
                .column( colIdx )
                .search( this.value )
                .draw();
 } );

How can i get the independent column search values ?

For Ex :
Search Input Box1 - Column 0
Search Input Box2 - Column 1

Pass Value :
     column[0][search][value]  -   Search Input Box1 Value
     column[1][search][value]  -   Search Input Box2 Value

Kindly, let us know your valuable suggestion.

allan

Can you link me to the page showing the error so I can debug it please. The parameter you mention should contain the search value for the column.

Allan

prem2

Hello Allan,

Thanks for your response. I will create the test environment in live and provide the open url to show case the issue.

prem2

Hello Allan,

Here with i have created the live testing environment. Kindly, check it out.
I have placed the each column search box in the table header. When the user type some characters in the particular column it passes same value to all column search value.

Kindly, check the post data.

columns[0][search][value] - Same value ,
columns[1][search][value] - Same value ,
columns[2][search][value] - Same value

Live Url :
http://testtable.agilecentre.com/testing

prem2

Hello Allan,

Awaiting for your valuable response.

allan

Hi,

Thanks for the link. Your table appears to have two thead elements, which is not valid HTML. If you need two rows in the header, put them both in a single header.

Also you are using oTables.column( colIdx ).footer() is doesn't really make much sense when the inputs are in the header. That is returning null, which means that jQuery is using all of the inputs on the page for every iteration of the loop. You need to use the header() method to get the header cells.

Allan

prem2

Hi allen,

Thanks for your response. As discussed i have changed the header() function. But, facing another issue.

When i disable the "bSortCellsTop": true, the keyup event is working perfectly.
When i enable the "bSortCellsTop": , then keyup event is not working. I have updated the testing repo. Please, let us know your suggestion.

Thanks,
prem

allan

$( 'input', oTables.column( colIdx ).header() )

I don't think that will find any input elements will it? Use:

$( 'input', $(oTables.column( colIdx ).header()).next() )

Allan

prem2

Hi allen,

No luck of using the mentioned code. Updated the code in test environment. Pls, check it out.

http://testtable.agilecentre.com/testing

prem2

Hi alen,

Finally found the solution with the help of css.

// CSS

    <style>
            .datatbale-search-footer {
                display: table-header-group;
            }
        </style>

// Html

    <tfoot class="datatbale-search-footer">
                            <tr>
                                <td><input type="text" name="" value="" placeholder="prop_ref" 
                                id="column1_search" class="t_search" /></td>
                                <td><input type="text" name="" value="" placeholder="title" class="t_search"/></td>
                                <td><input type="text" name="" value="" placeholder="Publish status" class="t_search"/></td>
                                <td><input type="text" name="" value="" placeholder="Bedroom" class="t_search"/></td>
                            </tr>
                            </tfoot> 

// Script

oTables.columns().eq( 0 ).each( function ( colIdx ) {
          $( 'input', oTables.column( colIdx ).footer() ).on( 'keyup change', function () {
               oTables
                    .column( colIdx )
                    .search( this.value )
                    .draw();
           } );
       
    });

Thanks alen for your valuable response. It is nice and extraordinary plugin.

allan

Fantastic to hear you got it sorted out :-)

Allan

prem2

Hello Allan,

When we disable the "searching": false it affects the independent column search value. It passes the empty data.

So, i am forcing to enable the search box. Is that way to disable the search which does not affect the independent search column value.

To handle the situation i am using the below css.

.dataTables_filter, .dataTables_info { display: none; }

Thanks,
prem

allan

When we disable the "searching": false it affects the independent column search value.

If you disable searching, then, you've disabled searching :-).

I've you want to just remove the DataTables filtering input element, use the dom option to remove it.

Allan

prem2

Hello Allan,

Thanks , I forgot to use the dom option. I will try it out.

Is that possible the get the columns[1][name] value during the column search. Because, it would be really helpful we can get the name for server side processing.

Currently i am getting the value as empty.

columns[1][name] = empty value

Thanks,
Prem

allan

To set a name use the columns.name option.

Allan