Search field for every column

Search field for every column

peds87peds87 Posts: 12Questions: 1Answers: 0
edited November 2021 in SearchBuilder

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

This question has accepted answers - jump to:

Answers

  • peds87peds87 Posts: 12Questions: 1Answers: 0
    edited November 2021

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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • peds87peds87 Posts: 12Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

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

    Kevin

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • peds87peds87 Posts: 12Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • peds87peds87 Posts: 12Questions: 1Answers: 0
    edited November 2021

    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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • peds87peds87 Posts: 12Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • peds87peds87 Posts: 12Questions: 1Answers: 0
    edited November 2021

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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    edited November 2021

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

    Kevin

  • peds87peds87 Posts: 12Questions: 1Answers: 0

    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/

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    Answer ✓

    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

  • peds87peds87 Posts: 12Questions: 1Answers: 0

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

  • peds87peds87 Posts: 12Questions: 1Answers: 0

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

  • peds87peds87 Posts: 12Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    Answer ✓

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

    Kevin

Sign In or Register to comment.