DataTables Individual Column Search - In header

jLinux

I was using the individual column search, but i wanted to put the searches in a 2nd row in the header. I can get the inputs to display just fine, but they wont search. I know its something to do with the line containing: table.column(t).header()).on('keyup change'

Im sure its a very simple answer, I just cant find it..

Heres my code thus far

<table id="data-table" class="table <?php echo TABLE_STYLE_CLASSES; ?>">
    <thead>
        <tr>
            <th>Username</th>
            <th>Real Name</th>
            <th>Last Login</th>
            <th>Status</th>
            <th>E-Mail</th>
            <th>Groups</th>
            <th>Current Partition</th>
            <th>Auth Lib</th>
            <th>Action</th>
        </tr>
    </thead>
    <thead id="table-tfoot">
        <tr class="table-header">
            <td>Username</td>
            <td>Read Name</td>
            <td>Last Login</td>
            <td>Status</td>
            <td>E-Mail</td>
            <td>Groups</td>
            <td>Current Partitio</td>
            <td>Auth Lib</td>
            <td>Action</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>....</td>
            <td>....</td>
            <td>....</td>
            <td>....</td>
            <td>....</td>
            <td>....</td>
            <td>....</td>
            <td>....</td>
            <td>....</td>
        </tr>
    </tbody>
</table>


<script>
    // Main reference for data-table
    var $data_table = $( '#data-table' );

    // Initialize DataTable
    var table = $data_table.DataTable( );

    // Get a handler for the cells in the footer to add the search inputs
    var $dt_head = $data_table.find( 'thead' ).find( 'td' );

    // Then add the search inputs
    $dt_head.each( function () {
        var title = $dt_head.eq( $( this ).index()).text();

        if( title != 'Action' ) {
            $( this ).html($('<input/>', { 'type': 'text', 'placeholder': 'Search ' + title }).addClass('form-control input-xs table-column-search width-full p-0'));
        }
    });

    // Apply column filters at footer
    table.columns().eq(0).each(function (t) {
        // Here are my attempts
        //$( 'body' ).on( 'keyup change', '.table-column-search', function (e){
        //$('input', table.column(t).find('.table-column-search')).on('keyup change', function () {
        $('input', table.column(t).header()).on('keyup change', function () {
            table.column (t)
                    .search (this.value.replace(/(;|,)\s?/g, "|"), true, false)
                    .draw ();
        } );
    } );
</script>

jLinux

EDIT: I just noticed if I leave it at the default footer() (below), it SEEMS to do something, it will clear the table when I type anything into the inputs as if its filtering for what I just typed, but it will wipe out every row, regardless of what i type in the filters

$('input', table.column(t).footer()).on('keyup change', function () {

jLinux

Bump? Really need this :)

daniel_r

Not sure what the problem in your code but you can try my yadcf plugin for datatables for your column filtering see showcase sample

jLinux

Interesting, I like it, except if you want to search for multiple values: http://d.pr/i/Y4f

In my JS, I add this so I could search for: "value 1, value2; value3"

table.column (t)
                    .search (this.value.replace(/(;|,)\s?/g, "|"), true, false)
                    .draw ();

Should try adding that ;)

Starred your repo!

daniel_r

Thanks, for multiple value you can use filter_type: "multi_select", select_type: 'select2' see first column http://yadcf-showcase.appspot.com/DOM_source_select2.html , also you can "play" with the filter_match_mode for tunning your desired filtering behaviour

jLinux

Oh nice. And obviously its customizable right? (The CSS). And can I collapse/expand the row with the filters in them? If so, im in to use this

daniel_r

Its very customizable js/css take a look at the all showcase samples and read the docs in the js file

jLinux

If I sell my app, can it include your JS? (Obviously ill include the copyright and a link)

daniel_r

Yep, its a MIT good luck :)

jLinux

One more question, is there a way to dynamically add the column settings? I dont mean like a button to add a column, but rather something like grab the settings from an array or something? Id hate to mix PHP into the JS, thats just ugly

daniel_r

sure, its not related to yadcf, but if you build a json string matching the needed structure and pass it from php to you js code then it will work, eventually yadcf needs an array of objects, it dont mind how you build that array, you can search github for other projects that using yadcf + php to get some ideas

jLinux

Hey Daniel_r,

So the columns in my table are dynamically generated on the server side (php), and with the datatables column filters, I can basically insert the selector input in the cell when the table is generated.

Then whenever I someone wants to toggle the columns visibility, I can hide/show the entire row.

With your plugin, if I have to specify the filter type via the jquery code (filter_type, etc), does that hinder the ability to hide/show columns in the DOM? Will the filters get messed up?

Heres my JS to hide/show columns, just an fyi, pretty basic

        // Whenever column visibility is toggled
        $body.on( 'change', '.ui-corner-all', function (e){
            var $this       = $( this );
            var for_target  = $this.attr( 'for' );


            if(typeof for_target !== 'undefined') {

                var $target = $( '#' + for_target );
                var col_num = $target.val();

                if ( typeof col_num !== 'undefined' ) {
                    var column = table.column( col_num );
                    var status = column.visible();

                    column.visible( $target.is( ':checked' ) );
                }
            }
        });

Update: I think I got it working, and toggling columns seems to be fine. Can you tell me how to have the filters in a different row?
(A different <thead></thead> to be specific, that way it doesnt get include in table exports (pdf, csv, etc), and so I can hide/show that row easily)

daniel_r

yadcf support the ColVis plugin and IMO you beter use it to show/hide columns, but you can try and see how yadcf behaves with your own way to do the hiding

jLinux

It actually seems to work ok with what I have now, how about the putting YADCF in its own row?

daniel_r

Read about filter_container_id and see it in action (third column filter)

you can place all you filters anywhere you want...

Also I recommend you to go over all the showcase pages to see most of yadcf features

jLinux

var row = $('#data-table').find('thead').eq(0);
row.insertAfter(row.next());

Lol, works

jLinux

Ill use your way (the right way :P), If I find any bugs, should I report them? Found a few

daniel_r

yes , bugs on github, but provide as much info as possible and a sample page that reproduces them, future question related to yadcf better be asked on stackoverflow (tagged with yadcf)

jLinux

So far man, super easy to use!

        // Start the header filter array
        var header_filters = [];

        // Get the number of columns
        var filter_length = $data_table.find('thead').eq(0).find('th').length;

        // Create each filter (make them all the same for now)
        for (var n = 0; n < filter_length; ++ n){
            header_filters.push({
                filter_type: "text",
                column_number: n,
                filter_container_id: "column-filter-" + n
            });
        }

        // Initiate the filters
        yadcf.init(table, header_filters);

jLinux

Think I have just one last question, how do i hide the reset filter buttons? I looked on your site, saw how to change the labels and everything, not how to disable, maybe I missed it. should I just do it with CSS?

daniel_r

Its all in the docs , filter_reset_button_text read till the end, sure you can do the same with css if you want

I strongly recommend reading all the docs (they are for you) :)

jLinux

Yeah ill definitely read it tomorrow, just in a time crunch right now. Thanks! Really like the plugin so far

jLinux

Heres a screenshot of it setup thus far, pretty clean! http://d.pr/i/Txi4

jLinux

@daniel_r, just wanted to say that your plugin has worked REALLY well thus far! It took like a second to install and get it working, and ive made a billion changes to the code and datatables since I installed it, and I just went back to check if it still works, and it works like a charm!

The App im making, I plan on selling it, ill be sure to credit you and your website for the plugin somewhere on the app and the main website

daniel_r

Cool, I devloped yadcf to be as friendly/durable as possible to the devoloper :)

If you'll read the entire docs you might find out even more hidden gems of yadcf api

jLinux

@daniel_r, Question about yadcf,

The column_data_type option supports the values text / html / rendered_html

I was wondering if it was possible to dynamically set this? My table uses jQuery x-editable in the table, which you can enable and disable. When its enabled, the table contents are basically HTML Links, and when its disabled, it replaces the links with the text inside the links.

I was wondering if I could toggle column_data_type to text or rendered_html, depending on what the x-editable state is

Edit: Also looks like if I use the column_data_type, i should also take advantage of html_data_type, so can I do the same with that? (Except I guess disable/enable it?)

jLinux

One more, is it possible to have the column filter search for either the <td> content OR the html5_data attribute? I have my TD cells like so:

<td class="created" data-filter="1441294069">Sep 3, 2015, 8:27:49 MST</td>

I was hoping to make it so users could search for the 1441294069 OR the actual formatted timestamp..

If not, how can I leave the data-filter in the td, and not have YADCF use it? If I leave it there, I get the error:

Looks like you have forgot to define the html5_data attribute for the N column

Thanks!

daniel_r

yadcf will look at the data-filter only if you will set the html5_data: 'data-filter' for that column , otherwise it will look at the Sep 3, 2015, 8:27:49 MST which isn't actually a valid date format for yadcf (at least I have't tried it) you can try to find a valid date/time foramt for that value along with using bootstrap-datetimepicker , but IMO , filtering for date and time will be too cumbersome for the user , you better place a date range and filter for dates only, if you wont be able to find the right date format you can set up a small jsbin and post it and I will take a look what can be done.

As to the looking at the dt and at the html5_data , its not possible atm.

Also, if something not working the way you expect it, post a link to jsbin to a minimal example of the issue

jLinux

I thought there was a config setti g to be able to specify the date format?

Not at my mac now, but i know i saw one

daniel_r

There is, date_format but I have only tested mm/dd/yyyy and dd/mm/yyyy till now, but you can try others too.