Why my nested datatable is not displaying the plus and minus signs? - javascript

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.

Related

How to hide Datatables search bar? [duplicate]

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>

Hiding whole DataTable and only show result rows from DataTables search

I am using DataTabel.
I am successfully linking custom input text with DataTables search function.
Are there a way to hide whole DataTable including footer and header and only show search result rows?

You can use the DataTables dom option: dom: 'ft'
This causes only the f filter (search) box and the t table to be displayed.
You can hide the table's header and footer rows using CSS - for example, one way is to use:
<thead style="display: none;">
(It's better to place such styles in a CSS file, instead of embedding them inline in the HTML.)
The end result would be:
Live demo:
$(document).ready(function() {
$('#example').DataTable( {
dom: 'ft'
} );
} );
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable" style="width:100%">
<thead style="display: none;">
<tr>
<th>Name</th>
<th>Position</th>
<th>Office in Country</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>
<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>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
<tfoot style="display: none;">
<tr>
<th>Name</th>
<th>Position</th>
<th>Office in Country</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>

Getting DataTables to not filter certain rows

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>

Export to Excel button not showing

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.

How to perform sorting in datatables using jquery plugin?

$(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>

Categories