Datatables highlight rows beyond the first paginated page when table cells match - javascript

The Datatables plugin is giving me some issues when trying to highlight rows beyond the first paginated page.
As you will see in the example JSFiddle below I am sorting on the positions column on load. When there are 2 or more related positions in a row we highlight the parent table rows.The issue I am having is that if there is one position on the first page that is in the last table row and that matches the the first position on the second page the last table row on the first page is not highlighted. The example I am using here is the developer position.
JSFiddle
https://jsfiddle.net/ebRXw/563/
JS
$(document).ready(function () {
$('table').dataTable({
"paging": true,
"ordering": true,
"filter": false,
"length": false,
"info": false,
"order": [
[1, "asc"]
]
});
highlight();
$('table').on('draw.dt', function () {
if ($("thead th:nth-child(2)").hasClass("sorting_desc") || $("thead th:nth-child(2)").hasClass("sorting_asc")) {
highlight();
} else {
$("td").removeClass("info");
$("td").css("border-bottom", "");
}
});
function highlight() {
var duplicate = false;
$("table tbody tr").each(function () {
var $current = $(this).children(":nth-child(2)");
var $next = $(this).next().children(":nth-child(2)");
if ($current.text() === $next.text() && !duplicate) {
duplicate = true;
$current.parent().children().addClass("info");
$current.parent().prev().children().css("border-bottom", "1px solid #333");
} else if ($current.text() === $next.text() && duplicate) {
$current.parent().children().addClass("info");
} else if ($current.text() !== $next.text() && duplicate) {
$current.parent().children().addClass("info");
$current.parent().children().css("border-bottom", "1px solid #333");
duplicate = false;
} else {
$current.parent().children().removeClass("info");
$current.parent().children().css("border-bottom", "");
}
});
}
});

In DataTables only visible rows exist in DOM, that is why next() and prev() don't work as expected.
You can use rows({ search: 'applied' ).nodes() to get all the rows with filtering applied.
Also since you're working on the whole dataset, it makes sense to attach to order.dt event instead to highlight rows only once on ordering.
See updated jsFiddle for code and demonstration.
However I would recommend to see Row grouping example, it seems to be better in terms of usability and code.

In the highlight function, you're only looking at the the data of the current page. That is why the "Developer" row doesn't see that it actually has a duplicate row on some other page.
What you should do is look at the data of the entire table. You can do this by calling the following at the start of the highlight function:
var data = $('table').dataTable().fnGetData();
In each row of the current page you can than see if there's a duplicate row somewhere in the table by calling:
var isDup = $.grep(data, function(d) { return d[1] === $current.text(); }).length > 1;
Depending on this isDup var you can place css for info and border bottoms

Related

jQuery: Detach table rows then append back to same position

I am trying to remove/append table rows using jQuery's detach() method. I'd rather use this method than jQuery's hide/show to keep certain css styles. The detach function is tied to a checkbox that will hide any rows that contain "No".
The problem I am having is my table has sortable headers, and if I sort any column before I use this function, the table rows do not get put back into the right position.
$(document).ready(function () {
var tablerows;
$('#indexTable tr').each(function(i) {
$(this).data('initial-index', i);
});
$('#customSwitch1').change(function () {
if (tablerows) {
$(tablerows).appendTo('#indexTable').each(function(){
var oldIndex = $(this).data('initial-index');
$('#indexTable tr').eq(oldIndex).before(this);
});
tablerows = null;
} else {
tablerows = $('#indexTable tr:contains(No)').detach();
}
});
});
How can I put the rows back into the position before detachment, or even back to the position when the table is first loaded?

Datatables deleting a row where column value equals something

I have tried the following and I am unable to find a match. What am I doing wrong?
var table = $('#mytable').DataTable();
//hide the row where text in column 1 equals 202733001010
var index = table.row().eq( 0 ).filter( function (rowIdx) {
return table.cell( rowIdx, 0 ).data() === '202733001010' ? true : false;
} );
What i get is a convoluted empty array that does not seem to have any values in it. My end purpose is to delete a row where a column cell (in this case 0) equals a certain value but I think I may be using an incorrect approach. Many thanks in advance for your suggestions. Datatables documentation : https://datatables.net/reference/type/row-selector
If your goal is to actually remove the row (filter and search just hides/shows matching data), the logic below can do it fairly straight forward. I use a text box to enter a value to get ride of out of the first column. If found, I remove it.
See it work here http://live.datatables.net/natejiju/1/edit
$(document).ready( function () {
var table = $('#example').DataTable();
$("#btnGo").on("click", function(){
var s = $("#txtSearch").val();
table.rows().nodes().each(function(a,b) {
if($(a).children().eq(0).text() == s){
table.rows(a).remove();
}
} );
table.rows().invalidate();
table.draw();
});
});

jquery function on same classes

I have a page where I have a table with a class. This table sometimes occurs multiple times on the page. I need to do the same jquery function on each instance. How do I achieve that with jquery...???
Here is my jquery:
jQuery(window).load(function () {
if(jQuery('.ezfc-summary-table tr:eq(2) td:eq(1)').text()=='1 layer'){
jQuery('.ezfc-summary-table tr:eq(5)').hide();
jQuery('.ezfc-summary-table tr:eq(6)').hide();
jQuery('.ezfc-summary-table tr:eq(8)').hide();
}
});
#devlin carnate - i'm trying to do another thing, which is to take the text from one of the td's and append it to another class (product-title), which also appears multiple times. Here is what i have tried, but it only takes the text from the first td it finds, and appends it to all the following classes.
$(document).ready(function() {
$('.ezfc-summary-table').each(function(i, obj) {
var table = $(this);
if (table.find('tr').eq(2).find('td').eq(1).text() == '1 layer') {
table.find('tr').eq(5).hide();
table.find('tr').eq(6).hide();
table.find('tr').eq(8).hide();
var getpartname = $('.ezfc-summary-table tr:eq(0) td:eq(1)').text();
$('.product-title').append('<span style="padding-left: 5px;">'+getpartname+'</span>');
}
});
});
Could you help me solve this problem also...???
Thanks in advance
You can iterate over the class assigned to the tables using jQuery $.each() and hide the rows based on whether the '1 layer' text condition is met:
$(document).ready(function() {
$('.ezfc-summary-table').each(function(i, obj) {
var table = $(this);
if (table.find('tr').eq(2).find('td').eq(1).text() == '1 layer') {
table.find('tr').eq(5).hide();
table.find('tr').eq(6).hide();
table.find('tr').eq(8).hide();
}
});
});
Here is a Fiddle Demo : https://jsfiddle.net/zephyr_hex/f45umhkp/2/

JQuery Datatables search within input and select

Using Jquery Datatables with inputs and selects as shown here: http://datatables.net/examples/api/form.html
or if I used a custom column render handler to produce the input and selects how can I make the global table search work?
If you view the example you'll notice that only the first column, the read only one, is included in the search, what can I do to include the other columns in the search?
If you view the example in the link in my question and type "Tokyo" into the search all rows are returned. This is because "Tokyo" is an option in all dropdowns. I would want only rows with Tokyo selected to show. If you type in "33" you see no rows even though the first row has a value of "33" in the first column.
I can't seem to find any documentation on how to define what the search value is for a particular cell in a datatable.
It is not very well documented. And it seems to work differently, or not work at all, between (sub)versions. I think dataTables is intended to automatically detect HTML-columns, but for some reason, most of the times, it doesnt. The safest way is to create your own search-filter :
$.fn.dataTableExt.ofnSearch['html-input'] = function(value) {
return $(value).val();
};
This will return 33 on <input>'s with value 33, and Tokyo on <select>'s where Tokyo is selected. Then define the desired columns as of type html-input ;
var table = $("#example").DataTable({
columnDefs: [
{ "type": "html-input", "targets": [1, 2, 3] }
]
});
see demo based on http://datatables.net/examples/api/form.html -> http://jsfiddle.net/a3o3yqkw/
Regarding live data: The issue is, that the type based filter only is called once. dataTables then caches the returned values so it not need to "calculate" all the values over and over. Luckily, dataTables 1.10.x has a built-in function for cells, rows and pages called invalidate that forces dataTables to reset the cache for the selected items.
However, when dealing with <input>'s there is also the problem, that editing the value not is changing the value attribute itself. So even if you call invalidate(), you will still end up in filtering on the old "hardcoded" value.
But I have found a solution for this. Force the <input>'s value attribute to be changed with the <input>'s current value (the new value) and then call invalidate :
$("#example td input").on('change', function() {
var $td = $(this).closest('td');
$td.find('input').attr('value', this.value);
table.cell($td).invalidate();
});
For textareas use text() instead :
$("#example td textarea").on('change', function() {
var $td = $(this).closest('td');
$td.find('textarea').text(this.value);
table.cell($td).invalidate();
});
This is also the case when dealing with <select>'s. You will need to update the selected attribute for the relevant <option>'s and then invalidate() the cell as well :
$("#example td select").on('change', function() {
var $td = $(this).closest('td');
var value = this.value;
$td.find('option').each(function(i, o) {
$(o).removeAttr('selected');
if ($(o).val() == value) $(o).attr('selected', true);
})
table.cell($td).invalidate();
});
forked fiddle -> http://jsfiddle.net/s2gbafuz/ Try change content of the inputs and/or the dropdowns, and search for the new values ...
If the point here is to search through all the inputs within a table based on the live values (and "regular" cells), you might want to build your own custom search ($.fn.DataTable.ext.search.push()):
//custom search function
$.fn.DataTable.ext.search.push((_,__,i) => {
//get current row
const currentTr = dataTable.row(i).node();
//look for all <input>, <select> nodes within
//that row and check whether current value of
//any of those contains searched string
const inputMatch = $(currentTr)
.find('select,input')
.toArray()
.some(input => $(input).val().toLowerCase().includes($('#search').val().toLowerCase()));
//check whether "regular" cells contain the
//value being searched
const textMatch = $(currentTr)
.children()
.not('td:has("input,select")')
.toArray()
.some(td => $(td).text().toLowerCase().includes($('#search').val().toLowerCase()))
//make final decision about match
return inputMatch || textMatch || $('#search').val() == ''
});
The complete DEMO of this approach you may find below:
const srcData = [{id:1,item:'apple',category:'fruit'},{id:2,item:'banana',category:'fruit'},{id:3,item:'goosberry',category:'berry'},{id:4,item:'eggplant',category:'vegie'},{id:5,item:'carrot',category:'vegie'}];
const dataTable = $('table').DataTable({dom:'t',data:srcData,columns:[{title:'Id',data:'id'},{title:'Item',data:'item',render:data=>`<input value="${data}"></input>`},{title:'Category',data:'category',render:data=>`<select>${['fruit', 'vegie', 'berry'].reduce((options, item) => options+='<option value="'+item+'" '+(item == data ? 'selected' : '')+'>'+item+'</option>', '<option value=""></option>')}</select>`}]});
$.fn.DataTable.ext.search.push((_,__,i) => {
const currentTr = dataTable.row(i).node();
const inputMatch = $(currentTr)
.find('select,input')
.toArray()
.some(input => $(input).val().toLowerCase().includes( $('#search').val().toLowerCase()));
const textMatch = $(currentTr)
.children()
.not('td:has("input,select")')
.toArray()
.some(td => $(td).text().toLowerCase().includes($('#search').val().toLowerCase()))
return inputMatch || textMatch || $('#search').val() == ''
});
$('#search').on('keyup', () => dataTable.draw());
<!doctype html><html><head><script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script><script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script><link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></head><body><input id="search"></input><table></table></body></html>
This should search the entire table instead of specific column(s).
var table = $('#table').DataTable();
$('#input').on('keyup', function() {
table.search(this.val).draw();
});
Best thing to do here is just update the cell container to the new value from the input and keep the datatable data object sync with the UI input:
$("#pagesTable td input,#pagesTable td select").on('change', function () {
var td = $(this).closest("td");
dataTable.api().cell(td).data(this.value);
});
Replace you input by Textarea, and add the css below. It will make your textarea looks like an input.
textarea{
height: 30px !important;
padding: 2px;
overflow: hidden;
}

How can I hide empty html table cells with jQuery?

I have a 5×7 HTML table. On many queries, there are fewer than 35 items filling the complete table.
How can I "hide" the empty cells dynamically in this case, using jQuery (or any other efficient way)?
Edit - Improved Version
// Grab every row in your table
$('table#yourTable tr').each(function(){
if($(this).children('td:empty').length === $(this).children('td').length){
$(this).remove(); // or $(this).hide();
}
});
Not tested but seems logically sound.
// Grab every row in your table
$('table#yourTable tr').each(function(){
var isEmpty = true;
// Process every column
$(this).children('td').each(function(){
// If data is present inside of a given column let the row know
if($.trim($(this).html()) !== '') {
isEmpty = false;
// We stop after proving that at least one column in a row has data
return false;
}
});
// If the whole row is empty remove it from the dom
if(isEmpty) $(this).remove();
});
Obviously you'll want to adjust the selector to fit your specific needs:
$('td').each(function(){
if ($(this).html() == '') {
$(this).hide();
}
});
$('td:empty').hide();
How about CSS empty-cells
table {
empty-cells: hide;
}
I'm voting for Ballsacian's answer. For some reason,
$('table#myTable tr:not(:has(td:not(:empty)))').hide();
has a bug. If you remove the outermost :not(), it does what you'd expect, but the full expression above crashes jQuery.

Categories