DataTables Responsive: Remove row when columns are hidden - javascript

I am using DataTables to create grid.
It's a great tool, but I have a problem with which occurs when the grid columns are hidden for example on mobile or other small devices where there is not enough room to display all columns.
Problem:
Removing grid row when columns are hidden. When are columns are showing it works just fine.
Table code:
<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>Remove</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Remove</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>
<button type="button" class="btn btn-info btn-sm removeRow">Remove this row</button>
</td>
</tr>
<tr>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>2008/12/19</td>
<td>
<button type="button" class="btn btn-info btn-sm removeRow">Remove this row</button>
</td>
</tr>
</tbody>
</table>
Javascript code:
$(document).ready(function() {
$('#example').DataTable({
responsive: true
});
});
$(".removeRow").click(function() {
var table = $('#example').DataTable();
table.row($(this).parents('tr')).remove().draw();
});
I am attaching link to jsfiddle. You can clearly see it works when columns are shown, and it breaks when columns are hidden.
I wonder if anyone else came across similar issue, any help would be appreciated.

I have managed to fix the issue. I decided to post it in case anyone else has similar problem.
This wasn't working because HTML structure changes when columns are collapsing. To fix this I added extra check, to verify if columns are collapsed or not.
Amended code:
$(document).on("click", ".removeRow", function() {
var table = $('#example').DataTable();
var row;
console.log($(this).closest('table'));
if($(this).closest('table').hasClass("collapsed")) {
var child = $(this).parents("tr.child");
row = $(child).prevAll(".parent");
} else {
row = $(this).parents('tr');
}
table.row(row).remove().draw();
});
It's now working fine.
Here is updated jsfiddle.

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>

Search Box datatable outside the table

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>

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

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.

Javascript / jquery adding pagination to td added via jquery append

I have a table which is hidden when the page is loaded and has not data in it.
After the user click a button the table is then populated and finally shown.
Like this:
tr = $('<tr/>');
tr.append("<td>somedata here</td>");
$('#mytable').append(tr);
$('#mytable').show();
and here's the table:
<table id="mytable" class="table table-striped table-bordered" style="display:none">
<thead>
<tr>
<th>Data below</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
My problem is that I've tried plenty of plugins including dataTables and they just don't work.
I need to find either a way to get the plugins to work or find a way of doing pagination that works with the way I'm populating the table.
How can I do this?
You can use datatable. It will automatically handle pagination
Here is working demo :
$(document).ready(function() {
$('#example').DataTable();
var dataTable = $("#example").dataTable().api();
$("#addRow").click(function() {
tr = document.createElement("tr");
tr.innerHTML = "<tr><td>New row </td><td>Test</td><td>45</td></tr>";
dataTable.row.add(tr);
dataTable.draw();
});
});
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Age</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Age</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger</td>
<td>System Architect</td>
<td>61</td>
</tr>
<tr>
<td>John deo</td>
<td>System Architect</td>
<td>61</td>
</tr>
<tr>
<td>Jane Deo</td>
<td>System Architect</td>
<td>61</td>
</tr>
</tbody>
</table>
<button id="addRow">Add Row</button>

jQuery live filtering, how do I return entire rows when matched?

I'm using the jQuery live filter plugin to make an instant search over a entire table. The plugin works fine but it filters by cell and I'd like to search for an entire row (tr) match instead of just a cell.
HTML:
<h2 class="sub-header">List of Enabled Alarms</h2>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search">
</div>
<div class="table-responsive">
<table class="table table-striped" id="alarm-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Due Date</th>
<th>Creation Date</th>
<th>Frequency</th>
<th>Enabled</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td>Alarm dev test</td>
<td>29-12-2015</td>
<td>28-12-2015</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
<tr>
<td>61</td>
<td>Testing email</td>
<td>05-01-2016</td>
<td>04-01-2016</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
</tbody>
</table>
JAVASCRIPT:
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filterChildSelector: 'tr'
});
</script>
The result of this code is partial row information. If I write a it returns all cells that match but not entire rows as I expected. I'd like to search only by column name if possible.
As per this plugin you can pass filter funtion for matching elements. So try below code.
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filter: function(el, val){
return $(el).find('td:eq(1)').text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
}
});
</script>
Or better if you could give any class name to your cell containing alarm name. In that case your html looks like :
<h2 class="sub-header">List of Enabled Alarms</h2>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search">
</div>
<div class="table-responsive">
<table class="table table-striped" id="alarm-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Due Date</th>
<th>Creation Date</th>
<th>Frequency</th>
<th>Enabled</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td class="alarmName">Alarm dev test</td>
<td>29-12-2015</td>
<td>28-12-2015</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
<tr>
<td>61</td>
<td class="alarmName">Testing email</td>
<td>05-01-2016</td>
<td>04-01-2016</td>
<td>ExactTime</td>
<td>Enabled</td>
<td>Edit Delete</td>
</tr>
</tbody>
</table>
and use below script :
<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filter: function(el, val){
return $(el).find('.alarmName').text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
}
});
</script>

Categories