Search field for every column
Search field for every column
peds87
Posts: 12Questions: 1Answers: 0
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
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
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
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
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
Please tell us where to find your Javascript code in the link you provided.
Kevin
Lets try this way https://drive.google.com/drive/folders/10guLrC7hE1pKz8m6R9wmgfq9ef6o-P1r?usp=sharing
thanks
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
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
Here is your HTML table:
You are using this code to add the inputs to the footer:
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
From stack thread
Not being a pain but could you direct me a bit more please? sorry! I tried all of them but didnt work. thanks
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
initCompletecode 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: nullto the last column to stop theRequested unknown parametererrors.Kevin
Kevin you rock, although it won't work still. I just give up but thanks a lot for your time and help
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
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
Look at the browser's console for errors. You probably just have a syntax error.
Kevin
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/
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
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??
Kevin, forget about my last comment. Its sorted. I cant thank you enough for your patience and help. Thank you!!!
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!!
You can use CSS to control the width of text inputs in the footer. See this thread with a similar question.
Kevin