scrollY with individual column searching (text inputs) in the header and set the value of the input

grid · December 2019

Hello,

After using scrollY I'm not able to put individual column searching (text inputs) in the header and can't set the value of the input with val(); also anymore. Test page:

http://live.datatables.net/yuvuhate/1/edit

For example line 167; I can't set the value of every matched element.

About the individual column searching (text inputs) in the header (related posts):
https://datatables.net/forums/discussion/30936
https://datatables.net/forums/discussion/35673
https://datatables.net/forums/discussion/comment/146190/#Comment_146190

I tried the trick of colin (without 100% working):

http://live.datatables.net/diwapewa/33/edit

Could I get help with this things?

Thanks,

Mark

kthorngren · December 2019

Not sure why your code doesn't work but this example does work with scrollY:
http://live.datatables.net/cedayopa/15/edit

Note that it uses two header rows and orderCellsTop to place teh sorting capability in the top header.

Kevin

kthorngren · December 2019

Not sure why your code doesn't work but this example does work with scrollY:
http://live.datatables.net/cedayopa/15/edit

Note that it uses two header rows and orderCellsTop to place teh sorting capability in the top header.

Kevin

grid · December 2019

Kevin, are you able to use bootstrap4 with your example? Or anyone else could with the goal?

Thanks,

Mark

kthorngren · December 2019

Kevin, are you able to use bootstrap4 with your example?

This is something you can easily do. You can use the Download Builder to generate the CDN links for Datatables and Bootstrap then add to the test case. I did this for you here:
http://live.datatables.net/cedayopa/17/edit

I noticed the columns were not lined up. Adding the inputs changes the column widths after Datatables has initialized. I used columns.adjust() to recalculate the column widths after initialization.

Kevin

grid · December 2019

Yes, amazing. I truly appreciate your help on this. I know the page where you can select the packages. In the given example I used this packages: Query 3.3.1, Moment 2.18.1, Bootstrap-4 4.1.1, DataTables 1.10.20, Buttons 1.6.1, Column visibility 1.6.1, Select 1.3.1

Instead of only: Bootstrap-4 4.1.1, DataTables 1.10.20

It stops working with the additional required packages. Test page: http://live.datatables.net/lamarupo/1/edit

Thanks,

Mark

kthorngren · December 2019

I uncommented the Additional required package and commented out the Currently used packages. The CDN for the Additional required package includes jquery.js. I also commented out the jquery.js being loaded in the first line. I suspect that is the problem you are having with jquery being loaded twice.
http://live.datatables.net/fumuzuli/1/edit

Kevin

grid · December 2019

Kevin, to be a little more specific. It works until column visibility is enabled with the package for it. When you will click inside a text input field you will sort the column.

Yes, i noticed about the jquery that was loaded twice.

http://live.datatables.net/lamarupo/4/edit

Thanks,

Mark

kthorngren · December 2019

When you will click inside a text input field you will sort the column.

Above I mentioned the use of orderCellsTop to move the sorting listeners to the top row. I added the option back into the test case here:
http://live.datatables.net/jabarela/1/edit

Kevin

grid · December 2019

Yes, thanks again. It all looks ok but like you already know maybe is that when you show/hide some columns the search will be broken on the text input:

Thanks,

Mark

kthorngren · December 2019

Yes, it gets quite complicated to support header searches when using column visibility, scrollX and state save due to the HTML manipulation that takes place. Here is an example using column visibility:
http://live.datatables.net/dikuduka/1/edit

But it doesn't work with scrollX. I don't have an immediate answer to support all three at once. If I have time I'll take a look.

Kevin

grid · December 2019

Hello Kevin,

So there are a couple of options to choose from now.
When going for the first option which may have the three at once but with the searchboxes in the footer (which have their own id's) there is need for the end user to control/set the values like: $("#footer_filter1").val("Developer"); Something set's it back now by using scrollX. Is there a solution/trick for this?

http://live.datatables.net/yuvuhate/1/edit

When going for your example as being the second option (which I think is the best) without having column visibilty but with searchboxes in the header I notice that the searchboxes didn't have their own own id's. So the enduser can't set/control them like $("#footer_filter1").val("Developer"); Is there a solution/trick for this?

http://live.datatables.net/fumuzuli/1/edit

I've given the searchboxes their own input id's but then the search will be broken from inside the table:

http://live.datatables.net/merogixi/1/edit

A related post maybe:

https://datatables.net/forums/discussion/31691

Thanks,

Mark

grid · December 2019

I've found an option to have the second option working.

http://live.datatables.net/jesimuyu/1/edit

Thanks,

Mark

kthorngren · December 2019

I think I found a way to support ScrollX, ColVis and StateSave:
http://live.datatables.net/tutibuhu/1/edit

Other than adding comments the code to initially build the inputs is the same as my other examples. Except I added a data attribute to each column indicating the Datatables column number. The keyup event uses the data attribute for the column number instead of deriving it from the HTML column index.

Last I use the column-visibility event to add the input to the second row th in case StateSave had this column hidden on page load.

There may be better solutions for this but it seems to work.

Kevin

grid · December 2019

Hello Kevin,

Yes, that works I believe. Nice work. Note that I've used my original test page with your changes:

http://live.datatables.net/waxiriqa/1/edit

Is it possible to don't save the state for the searches you make on a searchbox?

Thanks,

Mark

grid · December 2019

It works with:

https://datatables.net/plug-ins/api/fnFilterClear (not the plugin)

http://live.datatables.net/gukuyute/1/edit

Not sure why this wouldn't do it:

"stateSaveParams": function (settings, data) {
    data.search.search = "";

Thanks,

Mark

kthorngren · December 2019

Good find. You need the .columns().search( '' ) portion to clear the column searches.

data.search.search = ""; is for the global search and won't affect the column searches. I think you could do something similar by iterating through all the columns (data.columns I believe) and setting the search to "". But the above seems simplar and probably more clear in the code.

Kevin

kthorngren · December 2019

I thought I've seen previously a simpler way to get the visible column index than my solution. Instead of needing the data attribute with the column number it looks like $(this).parent().index()+':visible' will work. I updated my example to show this:
http://live.datatables.net/tutibuhu/5/edit

Found that code snippet again in this thread.

Kevin

grid · January 2020

Hello Kevin,

Ok. I adapted your change to the testpage.

http://live.datatables.net/cesolasa/1/edit

What is your idea about how I have done the search from outside the table?

Thanks,

Mark

kthorngren · January 2020

Looks good. Here is an example I have with checkbox searching that may interest you.

Plugin version:
http://live.datatables.net/rosahuka/1/edit

Function version:
http://live.datatables.net/vipifute/1/edit

Kevin

grid · January 2020

Hello Kevin,

Ok. The checkboxes are currently optional to use but thanks for this advise. I adapted the previous changes together to a test page which is using datatables editor too. Test page:

http://live.datatables.net/dulakuci/1/edit

But as soon I enable column visibility on the first table (line 48) I will not able anymore to see/use the buttons of the editor extension. I would need them to work with column visibility. Also if domtrip (line 46) is enabled, it will cause both datatables to not display the records. I overlooked maybe something but I can't use the search inputs on the first table too. Could you help me to let this things work on the test page that I described?

Thanks,

Mark

kthorngren · January 2020

enable column visibility on the first table (line line 48) I will not able anymore to see/use the buttons of the editor extension

You need to list all the buttons you want displayed in the buttons option.

if domtrip (line 46) is enabled, it will cause both datatables to not display the records.

This error appears in the browser's console:
Uncaught Unknown button type: print

I believe Print button is a default when none are listed.

I can't use the search inputs on the first table

You are using the variable table for both Datatables:
var table = $('#example').DataTable(...)
var table = $('#example2').DataTable(...)

In your 'keyup' event and other places where you use table it will always refer to #example2. You should use different variables. Not sure if I changed all the places that need to be table2.

Using scrolling causes Datatables to clone your table tag to create a scrollbody.
This clone doesn't keep the id which is why this selector is needed:
$( 'table thead' ).on( 'keyup', ".column_search",function () {...}).

The problem is now you have two tables which the above selector finds both. I'm not sure how to get the original table ID to use as a selector. @allan or @colin may have a better, Datatables oriented option but I created an HTML5 data attribute on the second header row that is the table ID. This can easily be gotten using jQuery then used to get an API instance of the proper table. Only one of the event handlers is needed, the other is commented out.

See the changes here:
http://live.datatables.net/telukabe/1/edit

Kevin

colin · January 2020

Only skimmed this, sorry, but this thread should help on how to get the table ID.

Colin

kthorngren · January 2020

@colin I'm not sure of the exact process but when scrollX or scrollY are used Datatables clones the original table and attaches the clone to the table. But the clone does not have the table id. For example this event handler:

    $( 'table thead'  ).on( 'keyup', ".column_search",function () { 
      var t = $(this).closest('table');
      console.log($(t)[0])
      
      // Search using the Datatables column number  
      table 
          .column( $(this).parent().index()+':visible' )    
          .search( this.value ) 
          .draw();  
    } );

Using $(this).closest('table') results in the cloned table:
<table class="table table-striped table-bordered dataTable" style="width: 1069px; margin-left: 0px;" role="grid">

Instead of the original table:
<table id="example" class="table table-striped table-bordered dataTable" style="width: 100%;" role="grid" aria-describedby="example_info">

In this event handler is there a way to determine the proper Datatables API to use for the search when multiple tables exist on the page?

If not what is the recommended way to handle events with multiple scrolling tables?

Want to find something that won't break if there are DOM structure changes when upgrading.

Kevin

colin · January 2020

Gotcha. There's no API method for this - I think Allan has added one for DataTables 2 as he realised this was a hole, so the way you were doing it is as good as any.

Another option, possibly less prone to updates, is to navigate through the scolling elements, something like this:

      var colin = $(this).parents('div.dataTables_scroll').find('div.dataTables_scrollBody').find('table');
      console.log($(colin[0]).attr('id'));

Colin

kthorngren · January 2020

That's what I was looking for. Thats a better option to manually adding a data attr to the '-tag tr'. Thanks! Updated the example here:
http://live.datatables.net/telukabe/5/edit

Kevin

grid · January 2020

Kevin,

Thanks for all your previous changes and for your method Colin. I think now if there are needs for more tables there is not so much work to do and the html is more clean.

Thanks,

Mark

grid · January 2020

Hello Kevin,

I've got everything working besides one thing which is when the table is still processing (the XHR) request it's impossible right now to do a search and set the input text headers at once. They are build when the table is initialized. This way you can only do a search the normal way when it's still processing:

var table = $("#example").DataTable();
table.columns(1).search('Donna').draw();

I overlooked this. Is it possible to build the text input headers before initialization has taken place? It takes time before the table processing has taken place. In this times there is no option to set the text input headers now.

A solution would be maybe to trigger the input text fields after the table is initialized. But maybe you know a more elegant way.

Thanks,

Mark

kthorngren · January 2020

There is another technique to add search inputs to the second header. A quick test with your example and it seems to work:
http://live.datatables.net/telukabe/9/edit

I removed initComplete and added this:

    $('#example thead tr:eq(1) th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" class="column_search" />' );
    } );

Kevin

grid · January 2020

Hello Kevin,

Yes thanks. I changed in my code line 259 to another selector. It works now to search as described above with both ways to add the inputs.

I noticed that the input width on the second table didn't stretch to 100% (full screen)

http://live.datatables.net/juzaluda/1

Found this related post:

https://datatables.net/forums/discussion/28447/adding-individual-search-input-changes-column-widths-added-testcase

But that wouldn't work. Any idea about it?

Thanks,

Mark

kthorngren · January 2020

I think this is what you are looking for:

th:nth-child(2) input{
  width: 100%
}

http://live.datatables.net/nodiquve/1/edit

Kevin

scrollY with individual column searching (text inputs) in the header and set the value of the input

scrollY with individual column searching (text inputs) in the header and set the value of the input

Answers

Howdy, Stranger!

Categories

DataTables

scrollY with individual column searching (text inputs) in the header and set the value of the input

scrollY with individual column searching (text inputs) in the header and set the value of the input

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables