Search field for every column

peds87

Hi everyone. Trying to learn this and I think I done pretty well but struggling with adding the search box in every column. If you could help it would be amazing. My js.html code below

<script>
  google.script.run.withSuccessHandler(showData).getData();
  function showData(dataArray){
    $(document).ready(function(){
      $('#test').DataTable({ 

        "scrollX": true,
        
        data: dataArray,

        
        columns: [
          {"title":"TEST1"},
          {"title":"TEST2"},
          {"title":"TEST3"},
        
     
          
        ],
      
        
        sPaginationType: "full_numbers",
        
        
        

        
        lengthMenu: [
            [ 4, 8, 12 ],
          
        ],
      
      
      columnDefs: [
        {
          targets: [0,1,2],
          width: "200px",
          },
          {
          targets: [0,1,2],
          width: "200px",
          },
          {
       
          targets: [3],
          width: "402px",
          },
          {
          targets: [-1,0,1,2,3],
          orderable: false,
          },
      
          ],

      
      dom: 'Bfrtip',
      buttons: [
        {extend: 'copy',text: 'Copy details',className: 'btn btn-primary glyphicon glyphicon-duplicate' },
        {extend: 'excel',text: 'Excel',className: 'btn btn-warning glyphicon glyphicon-list-alt' }, 
        {extend: 'print',text: 'Print',orientation: 'landscape', className: 'btn btn-success glyphicon glyphicon-print' },
              ],
        
      
      });
      
    });
  }
  
</script>

Thanks a lot!

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

Here are two examples to start with:
https://datatables.net/examples/api/multi_filter.html
https://datatables.net/examples/api/multi_filter_select.html

Kevin

peds87

Hey Kevin. Thanks for the prompt help. Unfortunately, before I posted here I done my research and even tho I tried those and others that I found on forums I can't get it to work for some reason

kthorngren

Please post a link to your page or a test case replicating the issue so we can take a look to offer suggestions.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

peds87

Hi Kevin. I have tried the below but they look completely different from what I have

live.datatables.net - Specifically designed for DataTables
JS Bin
JS Fiddle
CodePen

So here's the link for the page. Lets hope it helps

https://script.google.com/macros/s/AKfycbxTHEozX8gSheV1B9P_tlsmhMSK5pKEVlHKGeF4WH4iaLtXYVyvmuAOZQkRB7azFuq9/exec

thank you

kthorngren

Please tell us where to find your Javascript code in the link you provided.

Kevin

peds87

Lets try this way https://drive.google.com/drive/folders/10guLrC7hE1pKz8m6R9wmgfq9ef6o-P1r?usp=sharing

thanks

kthorngren

Maybe I'm missing it but the Javascript code in the link looks similar to the above which doesn't seem to have any code to build the column searches. Please provide a running test case showing what you are trying to do so we can help.

Kevin

peds87

Hey Kevin. Even tho it doesnt work and it breaks my code I have put it how I was trying to get the search on every column - please check jshtml file again. Thanks

kthorngren

Here is your HTML table:

<table id="test" class="table table-condensed table-hover table-sm" cellspacing="0"
  width="100%">
        
      </table>

You are using this code to add the inputs to the footer:

    $('#test tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );

But you don't have a footer defined in HTML so the selector $('#test tfoot th') won't find anything. Either add a foot directly in HTML or dynamically add it using Javascript or jQuery methods. See the Stack Overflow thread for one option.

Kevin

peds87

From stack thread

row 1, cell 1	row 1, cell 2
row 2, cell 1	row 2, cell 2

Not being a pain but could you direct me a bit more please? sorry! I tried all of them but didnt work. thanks

kthorngren

I copied most of your code into this test case:
http://live.datatables.net/romulimo/1/edit

Made up some sample data.

The first problem is with the initComplete code you pasted. Its not complete so its giving syntax errors. Plus it should go in your main Datatables init code. Datatables doesn't support multiple initializations.

I added the code, from the SO thread I linked to build the footer.

I also added data: null to the last column to stop the Requested unknown parameter errors.

Kevin

peds87

Kevin you rock, although it won't work still. I just give up but thanks a lot for your time and help

kthorngren

Why doesn't it work?

Do you get errors in the browser's console?

Please update the test case or provide a link to a page that shows the issue so we can take a look.

Kevin

peds87

Not sure why. It breaks the whole code and when I reload the page its all blank I have updated the js file on google driver

kthorngren

Look at the browser's console for errors. You probably just have a syntax error.

Kevin

peds87

Kevin - 4 errors. I can clear 2 of those by closing as {} (line 1 & 3) which it doesn't make sense to me but the other 2 I have no idea

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

kthorngren

You have a function declaration at the top but no closing }. Under that you have a $(document).ready(function() { with no closing });. I commented those out.

I presume you want to call the showData(dataArray) function to initialize Datatables. You should remove the imbedded ``$(document).ready(function()` functions. These events run when the page is ready and shouldn't be inside a function.

Javascript is very tricky with all the parenthesis and brackets that are used. Sometimes its just a matter of removing sections of code to help narrow down the problem.

Kevin

peds87

Righ!!! Got it! Well half of it. I have finally got the search field on every column although the search is not working as all search results are blank so is that because I removed the ``$(document).ready(function()` functions??

peds87

Kevin, forget about my last comment. Its sorted. I cant thank you enough for your patience and help. Thank you!!!

peds87

Oh! One more thing sorry as I meant to add on my very first post. The column width is not working properly so perhaps I gotta do it on headers instead? As I tried before all everything goes funny. Cheers!!

kthorngren

You can use CSS to control the width of text inputs in the footer. See this thread with a similar question.

Kevin