This question already has answers here:
How can I remove the search bar and footer added by the jQuery DataTables plugin?
(22 answers)
Closed 3 months ago.
I've a custom search bar built into my website, and I wanted to hide the default Datatables search bar, I still need the search function but without the default search...
I've tried to hide the default search bar by using CSS, but it didn't work I also tried to disable bInfo and bFilter but it will disable the search function completely...
Here is some code:
<script>
var oTable = $('#players_tools').DataTable({
paging: false,
info: false,
//searching: hide...
});
$('#players_search_tool').keyup(function() {
oTable.search($(this).val()).draw();
});
</script>
If you check the example you can see that it contains
<div id="example_filter" class="dataTables_filter"
you can use
$(".dataTables_filter").hide();
to hide that part.
Let's try it:
$(document).ready(function () {
$('#example').DataTable();
$(".dataTables_filter").hide();
});
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.css">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011-07-25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009-01-12</td>
<td>$86,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
<script src="https://code.jquery.com/jquery-3.6.1.js" integrity="sha256-3zlB5s2uwoUzrXK3BT7AX3FyvojsraNFxCc2vC/7pNI=" crossorigin="anonymous"></script>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.13.1/js/jquery.dataTables.js"></script>
Related
i'm trying to create search box datatables outside the table, i'm using datatables version 1.12.1, i use the reference from website and it won't work, the search box is not working.
The result:
oTable = $('#example').dataTable();
$('#myInputTextField').keyup(function() {
oTable.search($(this).val()).draw();
})
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<input type="text" id="myInputTextField">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Foo bar</td>
<td>Engineer</td>
<td>Glasgow</td>
<td>45</td>
<td>2012-05-26</td>
<td>$100,800</td>
</tr>
</tbody>
</table>
To get a reference to the datatable instance you need to use DataTable() - not dataTable(). The latter provides a jQuery object.
I would also suggest using the input event for the search box as it allows users to input text any possible way, not just using the keyboard.
let oTable = $('#example').DataTable();
$('#myInputTextField').on('input', function() {
oTable.search($(this).val()).draw();
})
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css">
<input type="text" id="myInputTextField">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011-04-25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Foo bar</td>
<td>Engineer</td>
<td>Glasgow</td>
<td>45</td>
<td>2012-05-26</td>
<td>$100,800</td>
</tr>
</tbody>
</table>
I have a nested data table which is not being displayed properly, it doesn't display the plus and minus sign , neither the pagination.
It seems like I am loading some styling wrong but I cant see where. I followed a JSFiddle example which works there but when I copy it in my computer it doesn't.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.datatables.net/v/dt/dt-1.10.16/r-2.2.1/datatables.min.css">
<script src="https://cdn.datatables.net/v/dt/dt-1.10.16/r-2.2.1/datatables.min.js"></script>
<script>
$(document).ready(function() {
var table = $('#example').DataTable({
'responsive': true
});
// Handle click on "Expand All" button
$('#btn-show-all-children').on('click', function() {
// Expand row details
table.rows(':not(.parent)').nodes().to$().find('td:first-child').trigger('click');
});
// Handle click on "Collapse All" button
$('#btn-hide-all-children').on('click', function() {
// Collapse row details
table.rows('.parent').nodes().to$().find('td:first-child').trigger('click');
});
});
</script>
</head>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th class="none">Age</th>
<th class="none">Start date</th>
<th class="none">Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tbody>
</table>
</html>
I am new to HTML and datatables so probably I am making stupid mistake somewhere but I cant detect.
Currently, our generic DataTables integration allows us to filter for Users, Items, etc.
In the case of our User table, we have a column with a checkbox. When this checkbox is clicked, the User should ignore any table filtering.
Here's what we have in mind:
We click the checkbox for say, two users
We begin to filter for a user that is not checked
The two checked users will stay in the table, as well as the user that was filtered for.
I wrote an implementation that simply appends the row back into the DOM if it's checked and not present, but it's pretty hacky. I would prefer an implementation that used tools offered by DataTables itself.
Does anyone have any idea how to do this?
If the idea is to make rows with checked checkboxes persistent upon searching, you may implement your custom searchbar with searching plugin that would filter rows depending on whether it contains searched text or has checked checkbox within the row node:
$.fn.dataTable.ext.search.push((_,__,rowIdx,dataObj) => Object.values(dataObj).some(cellData => cellData.toLowerCase().includes($('#searchbar').val().toLowerCase())) || $(dataTable.row(rowIdx).node()).is(':has(:checked)'));
Complete DEMO of this concept you might find over here.
Try to solve the problem. Here is the solution.
$(document).ready(function() {
var dataTable = $('#example').dataTable();
dataTable.on('search.dt', function() {
$('.dataTables_filter input').unbind().keyup(function(e) {
var value = $(this).val();
value = 'true|' + value
//console.log(value);
dataTable.fnFilter(value, null, true, false, true, true);
})
});
$('table').find('tr').on('change', function(event) {
//console.log($(this).index());
//console.log(event.target.checked);
if (event.target.checked) {
$(event.target).attr('checked', 'checked');
$(event.target).parent().append('<div id="true" hidden>true</div>');
} else {
$(event.target).removeAttr('checked');
$(event.target).parent().find('div').remove("#haha");
}
//reload a specific row
// dataTable.api().row($(this).index()).invalidate().draw();
//reload all row
dataTable.api().rows().invalidate().draw();
})
})
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.1.5/css/fixedHeader.dataTables.min.css">
<style>
thead input {
width: 100%;
}
</style>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>checkbox</th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2012/12/02</td>
<td>$372,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
My export to excel button keep not showing even after i used those code above. I don't have any idea with what's happening with those code. Someone with greater experience please help me. I got my reference from https://datatables.net/extensions/buttons/examples/initialisation/export.html
<table id="example" class="display nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function () {
$('#example').DataTable({
dom: 'Bfrtip',
buttons: [
'excel'
]
});
});
</script>
Here's the console output:
In order to you use the export plugin you also need to include the following scripts:
//code.jquery.com/jquery-1.12.4.js
https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js
https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js
//cdn.datatables.net/buttons/1.2.4/js/buttons.flash.min.js
//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js
//cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/pdfmake.min.js
//cdn.rawgit.com/bpampuch/pdfmake/0.1.24/build/vfs_fonts.js
//cdn.datatables.net/buttons/1.2.4/js/buttons.html5.min.js
//cdn.datatables.net/buttons/1.2.4/js/buttons.print.min.js
This is detailed in the link you provided. View the source of that page to see how they've included them.
$(document).ready(function() {
$('#example').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
I have used this even though it is not workin..
I am assuming based on your questing you are not able to sort your table by using jQuery plugins you have used.
For sorting your table first of all you have to add css and js file (check in following code and then in javascript code give your table ID (here id is example).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css">
<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable( {
"order": [[ 3, "desc" ]]
} );
} );
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td>$86,000</td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>2012/03/29</td>
<td>$433,060</td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2008/11/28</td>
<td>$162,700</td>
</tr>
</tbody>
</table>
</body>