I need to make a table to select the filters of an array with conditions here for example the beginning of the table for the filters (you cannot select client and user at the same time) :
to do this i create a table with id by cell :
jQuery(document).ready(function($) {
filter = {
date: 0,
client: 0,
user: 0
};
$(".blank_row > td").click(function() {
if (filter['date'] == 0 && $(this).attr('id') == 'date') {
filter[$(this).attr('id')] = 1;
$(this).addClass("bg-success");
}
else if (filter['date'] == 1 && $(this).attr('id') == 'date') {
$(this).removeClass("bg-success");
filter[$(this).attr('id')] = 0;
}
if (filter['client'] == 0 && filter['user'] == 0 && $(this).attr('id') != 'date') {
filter[$(this).attr('id')] = 1;
$(this).addClass("bg-success");
} else if (filter['client'] == 1 || filter['user'] == 1) {
$(this).removeClass("bg-success");
filter[$(this).attr('id')] = 0;
}
console.log($(this).attr('id'));
console.log(filter);
});
});
.blank_row {
height: 50px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<table id="graphTable" class="table table-sm table-bordered">
<thead>
<tr>
<th class="border" colspan="3">FILTER</th>
</tr>
<tr>
<th>DATE</th>
<th>CLIENT</th>
<th>USER</th>
</tr>
</thead>
<tbody>
<tr class="blank_row">
<td id="date"></td>
<td id="client"></td>
<td id="user"></td>
</tr>
</tbody>
</table>
but if i want to add new cells i would be quickly lost with the code i already made. Do you have any other solution to do what I want more simply?
You can use hasClass method of jquery to see if the tds have required class or not depending on that we can addClass or removeClass from any particular tds.
Demo code :
$(document).ready(function($) {
$(".blank_row > td").click(function() {
//get td closest tr(index)
var rowIndex = $(this).closest("tr").index();
//getting cell no of td which is clicked
var cell = $(this).index();
//looping over the tr
$('tbody > tr:eq(' + rowIndex + ') ').each(function(cellIndex){
var selectors = $(this).find("td:eq(" + cell + ")");
//checking if the clicked td has some classes or not
if (!(selectors.hasClass("bg-success")) && (selectors.hasClass("date"))) {
//add
selectors.addClass("bg-success");
} else if (selectors.hasClass("date") && selectors.hasClass("bg-success")) {
//removed
selectors.removeClass("bg-success");
}
//checking if the client and user has bg-success or not
if (!($(this).find(".client").hasClass('bg-success')) && !($(this).find(".user").hasClass('bg-success')) && !(selectors.hasClass("date"))) {
//add
selectors.addClass("bg-success");
} else if ((($(this).find(".client").hasClass('bg-success')) || ($(this).find(".user").hasClass('bg-success'))) && !(selectors.hasClass("date"))) {
//removed
selectors.removeClass("bg-success");
}
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<table id="graphTable" class="table table-sm table-bordered">
<thead>
<tr>
<th class="border" colspan="3">FILTER</th>
</tr>
<tr>
<th>DATE</th>
<th>CLIENT</th>
<th>USER</th>
</tr>
</thead>
<tbody>
<tr class="blank_row">
<td class="date">a</td>
<td class="client">b</td>
<td class="user">c</td>
</tr>
<tr class="blank_row">
<td class="date">a1</td>
<td class="client">b1</td>
<td class="user">c1</td>
</tr>
<tr class="blank_row">
<td class="date">a2</td>
<td class="client">b2</td>
<td class="user">c2</td>
</tr>
</tbody>
</table>
Related
I have a 300x11(rowXcolumn) html table that I wanted to filter exactly like Excel or Google Sheets's filter. However, after searching a bit I found out the following code below in a website. This works as I wanted but it has one major problem. It shows same value multiple times. For example in the 2nd column, there are 2 values same "Apple" and 2 whitespaces . In the current code, it displays Apple twice and whitespace twice. However, I want it should show the same values only once. For example, it will show "Apple" only once, and if I select apple it will filter both rows containing apple.
Thank you very much for your help.
index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<table class="grid">
<thead>
<tr>
<td index=0>Name
<div class="filter"></div>
</td>
<td index=1>Address
<div class="filter"></div>
</td>
<td index=2>City
<div class="filter"></div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>first</td>
<td>first add</td>
<td>SDF dfd</td>
</tr>
<tr>
<td>second</td>
<td></td>
<td>SDF dfd</td>
</tr>
<tr>
<td>third</td>
<td>Apple</td>
<td>SDF dfd</td>
</tr>
<tr>
<td>third</td>
<td></td>
<td>SDF hello</td>
</tr>
<tr>
<td>third</td>
<td>Apple</td>
<td>SDF hello</td>
</tr>
</tbody>
</table>
</body>
</html>
script.js
$(document).ready(function(){
$(".grid thead td").click(function(){
showFilterOption(this);
});
});
var arrayMap = {};
function showFilterOption(tdObject){
var filterGrid = $(tdObject).find(".filter");
if (filterGrid.is(":visible")){
filterGrid.hide();
return;
}
$(".filter").hide();
var index = 0;
filterGrid.empty();
var allSelected = true;
filterGrid.append('<div><input id="all" type="checkbox" checked>Select All</div>');
var $rows = $(tdObject).parents("table").find("tbody tr");
$rows.each(function(ind, ele){
var currentTd = $(ele).children()[$(tdObject).attr("index")];
var div = document.createElement("div");
div.classList.add("grid-item")
var str = $(ele).is(":visible") ? 'checked' : '';
if ($(ele).is(":hidden")){
allSelected = false;
}
div.innerHTML = '<input type="checkbox" '+str+' >'+currentTd.innerHTML;
filterGrid.append(div);
arrayMap[index] = ele;
index++;
});
if (!allSelected){
filterGrid.find("#all").removeAttr("checked");
}
filterGrid.append('<div><input id="close" type="button" value="Close"/><input id="ok" type="button" value="Ok"/></div>');
filterGrid.show();
var $closeBtn = filterGrid.find("#close");
var $okBtn = filterGrid.find("#ok");
var $checkElems = filterGrid.find("input[type='checkbox']");
var $gridItems = filterGrid.find(".grid-item");
var $all = filterGrid.find("#all");
$closeBtn.click(function(){
filterGrid.hide();
return false;
});
$okBtn.click(function(){
filterGrid.find(".grid-item").each(function(ind,ele){
if ($(ele).find("input").is(":checked")){
$(arrayMap[ind]).show();
}else{
$(arrayMap[ind]).hide();
}
});
filterGrid.hide();
return false;
});
$checkElems.click(function(event){
event.stopPropagation();
});
$gridItems.click(function(event){
var chk = $(this).find("input[type='checkbox']");
$(chk).prop("checked",!$(chk).is(":checked"));
});
$all.change(function(){
var chked = $(this).is(":checked");
filterGrid.find(".grid-item [type='checkbox']").prop("checked",chked);
})
filterGrid.click(function(event){
event.stopPropagation();
});
return filterGrid;
}
style.css
table thead tr td{
background-color : gray;
min-width : 100px;
position: relative;
}
.filter{
position:absolute;
border: solid 1px;
top : 20px;
background-color : white;
width:100px;
right:0;
display:none;
}
Maybe someone else will fix that limited JS for you but otherwise use DataTables. It has all you want with extensive documentation, and it's a popular plugin so it's not hard to find any answers to questions you might have about it. Here's an example with everything you desired in your post:
/* Range Search - https://datatables.net/examples/plug-ins/range_filtering.html */
$.fn.dataTable.ext.search.push(function(settings, data, dataIndex) {
var min = parseInt($('#min').val(), 10);
var max = parseInt($('#max').val(), 10);
var age = parseFloat(data[3]) || 0;
if (
(isNaN(min) && isNaN(max)) ||
(isNaN(min) && age <= max) ||
(min <= age && isNaN(max)) ||
(min <= age && age <= max)
) {
return true;
}
return false;
});
$(document).ready(function() {
/* Init dataTable - Options[paging: off, ordering: off, search input: off] */
var table = $('#table').DataTable({
"paging": false,
"ordering": false,
dom: 'lrt'
});
/* Column Filters */
$(".filterhead").each(function(i) {
if (i != 4 && i != 5) {
var select = $('<select><option value="">Filter</option></select>')
.appendTo($(this).empty())
.on('change', function() {
var term = $(this).val();
table.column(i).search(term, false, false).draw();
});
table.column(i).data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>')
});
} else {
$(this).empty();
}
});
/* Range Search -> Input Listener */
$('#min, #max').keyup(function() {
table.draw();
});
});
.container {
max-width: 80%;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.13.1/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.13.1/datatables.min.js"></script>
<body>
<div class="container">
<input type="text" id="min" name="min" placeholder="Min Number">
<input type="text" id="max" name="max" placeholder="Max number">
<table id="table" class="display">
<thead>
<tr>
<th class="filterhead">Name</th>
<th class="filterhead">Address</th>
<th class="filterhead">City</th>
<th class="filterhead">Number</th>
</tr>
<tr>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>first</td>
<td>first add</td>
<td>SDF dfd</td>
<td>18</td>
</tr>
<tr>
<td>second</td>
<td>as</td>
<td>SDF dfd</td>
<td>50</td>
</tr>
<tr>
<td>third</td>
<td>Apple</td>
<td>SDF dfd</td>
<td>2</td>
</tr>
<tr>
<td>third</td>
<td>as</td>
<td>SDF hello</td>
<td>25</td>
</tr>
<tr>
<td>third</td>
<td>Apple</td>
<td>SDF hello</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</body>
I need some assistance with changing the filtering from selection to multiple checkbox selection. Below the code currently filters with one selection only. I would like to be able to select multiple ages and terms in a checkbox form. Thank you for any guidance!
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="/stylesheets/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
<meta charset="utf-8">
<title>Filter</title>
</head>
</body>
</html>
<table id="myTable" class="table table-striped">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th class="dropdown-header">Age</th>
<th>Email</th>
<th class="dropdown-header">Gender</th>
<th class="dropdown-header">Term</th>
<th class="dropdown-header">Enrolled</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Smith</td>
<td data-field-name="age">15</td>
<td>123</td>
<td data-field-name="gender">Male</td>
<td data-field-name="term">Summer2017</td>
<td data-field-name="enrolled">Fall2018</td>
</tr>
<tr>
<td>Jane</td>
<td>Doe</td>
<td data-field-name="age">16</td>
<td>456</td>
<td data-field-name="gender">Female</td>
<td data-field-name="term">Fall2018</td>
<td data-field-name="enrolled">Fall2019</td>
</tr>
<tr>
<td>Bobby</td>
<td>Adams</td>
<td data-field-name="age">15</td>
<td>789</td>
<td data-field-name="gender">Male</td>
<td data-field-name="term">Spring2019</td>
<td data-field-name="enrolled">Fall2018</td>
</tr>
<tr>
<td>Sarah</td>
<td>Lee</td>
<td data-field-name="age">15</td>
<td>456</td>
<td data-field-name="gender">Female</td>
<td data-field-name="term">Fall2018</td>
<td data-field-name="enrolled">Fall2018</td>
</tr>
</tbody>
</table>
<script>
(function($) {
$.fn.tableFilterHeaders = function(filterFn) {
this.each((index, header) => {
let $header = $(header),
$table = $header.closest('table'),
text = $header.text(),
colIndex = $header.closest('th').index(),
fieldName = $header.attr('data-field-name') || text.toLowerCase(),
$select = $('<select>')
.data('fieldName', fieldName)
.append($('<option>').text(text).val('').prop('disabled', true))
.append($('<option>').text('All').val('all'))
.append($table.find('tbody tr')
.toArray()
.map(tr => {
return $(tr).find(`td:eq(${colIndex})`).text();
})
.filter(text => text.trim().length > 0)
.sort()
.filter((v, i, a) => a.indexOf(v) === i)
.map(text => {
return $('<option>').text(text).val(text);
}));
$header.empty().append($select.val('').on('change', filterFn));
});
};
$.fn.initRowClasses = function(oddCls, evenCls) {
this.find('tbody tr').each(function(i) {
$(this).toggleClass(oddCls, i % 2 == 0).toggleClass(evenCls, i % 2 == 1);
});
};
$.fn.updateRowClasses = function(oddCls, evenCls) {
this.find('tbody tr:visible:even').addClass(oddCls).removeClass(evenCls);
this.find('tbody tr:visible:odd').addClass(evenCls).removeClass(oddCls);
};
})(jQuery);
$('#myTable').initRowClasses('odd', 'even');
$('.dropdown-header').tableFilterHeaders(filterText);
function filterText(e) {
let $filter = $(e.target),
$table = $filter.closest('table'),
$filters = $table.find('.dropdown-header select'),
filterObj = $filters.toArray().reduce((obj, filter) => {
let $filter = $(filter);
return Object.assign(obj, { [$filter.data('fieldName')] : $filter.val() });
}, {});
if ($filter.val() === 'all') {
$filter.val('')
}
$table.find('tbody tr').each(function() {
$(this).toggle($(this).find('td').toArray().every(td => {
let $td = $(td), fieldName = $td.attr('data-field-name');
if (fieldName != null) {
return filterObj[fieldName] === null ||
filterObj[fieldName] === '' ||
filterObj[fieldName] === 'all' ||
filterObj[fieldName] === $td.text();
}
return true;
}));
});
$table.updateRowClasses('odd', 'even');
}
</script>
This is what is currently generating with the code above.
Are you looking for a multiple choice select?
have you tried this?
$select = $('<select>')
.data('fieldName', fieldName)
.attr('multiple')
https://www.w3schools.com/tags/att_select_multiple.asp
PS: If you need to implement this with checkboxes, see this:
How to use Checkbox inside Select Option
I have a table for some calculations and if cell value is passed I want to show that column of the table in a color.
I have this for the moment :
<script type="text/javascript">
$(document).ready(function(){
$('#myTable td.y_n').each(function(){
if ($(this).text() < 0.4) {
$(this).css('background-color','#a9edb8');
}
else {
$(this).css('background-color','#eda9ca');
}
});
});
</script>
but this is only for the cell.
Any idea? thanks!
If I understand your goal correctly, you want to set the background color of an entire column if one if the y_n cells contains a numeric value and choose the color based on that value.
To set the entire column, you could get the tablecells at the corresponding indices, but easier is to use a column group:
$(document).ready(function(){
var cols = $('#myTable col'); //get the column groups
$('#myTable td.y_n').each(function(){
var text = this.innerText; //text of the td
if(text.length > 0 && !isNaN(this.innerText)){ //check if it's a number
var ind = $(this).index(); //the index of the td inside its tr = the column index
$(cols[ind]).css('background-color', parseFloat(text) < 0.4 ? '#a9edb8' : '#eda9ca'); //set the col of the column group
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<colgroup>
<col>
<col>
<col>
</colgroup>
<tr>
<td>r1</td>
<td class='y_n'></td>
<td class='y_n'>.7</td>
</tr>
<tr>
<td>r2</td>
<td class='y_n'>.1</td>
<td class='y_n'>.6</td>
</tr>
<tr>
<td>r3</td>
<td>a</td>
<td>b</td>
</tr>
</table>
$(document).ready(function() {
$('#myTable td.y_n').each(function(i,v) {
if (parseFloat($(this).text()) < 0.4) {
$(this).closest("table").find("td").eq(i).addClass("pass");
} else {
$(this).closest("table").find("td").eq(i).addClass("fail");
}
});
});
.pass {
background-color: #a9edb8
}
.fail {
background-color: #eda9ca
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
<tr>
<td class='y_n'>
.3
</td>
<td class='y_n'>
.6
</td>
</tr>
<tr>
<td class='y_n'>
.2
</td>
<td class='y_n'>
.9
</td>
</tr>
<tr>
<td class='y_n'>
.9
</td>
<td class='y_n'>
.1
</td>
</tr>
</table>
Use parseFloat() then compare
You can also achieve like this. in each i is index and e will be current element. And i just added with="100" to table so its looks proper.
$(document).ready(function() {
$('#myTable td.y_n').each(function(i,e) {
if ($(e).text() < 0.4) {
$(e).css('background-color','#a9edb8');
} else {
$(e).css('background-color','#eda9ca');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable" width="100">
<tr>
<td class='y_n'>
.3
</td>
</tr>
<tr>
<td class='y_n'>
.6
</td>
</tr>
</table>
I am not saying this is the best way because i have use so many loops, but you can achieve your requirement by this code.
$(document).ready(function() {
$('#myTable tr').each(function(index,event) {
$(event).children('td').each(function(indexI,eventI) {
if ($(eventI).text() < 0.4) {
$('#myTable tr').each(function(indexIn,eventIn) {
$(eventIn).children('td').eq(indexI).css('background- color','#eda9ca');
});
}
});
});
});
Best of luck :)
If there are many rows (a lot of them) in your table, you might be better of using colgroups with col structure in your table, and put the background on the col-element. Anyway, you can always do this:
$(function() {
$('table a').click(function(e) {
e.preventDefault();
var index = $(this).html();
colHighlight($(this).closest('table'), index);
});
});
function colHighlight(table, colIndex) {
var bodyCells = table.find('tbody td');
bodyCells.css('background-color', 'transparent');
bodyCells.filter(':nth-child(' + colIndex + ')').css({
'background-color': 'yellow'
});
}
table, td, th {
border: 1px solid #000;
border-collapse: collapse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
<th>Head 3</th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3">
Highlight column:
1
2
3
</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
<tr>
<td>Content</td>
<td>Content</td>
<td>Content</td>
</tr>
</tbody>
</table>
Looking for a way to filter a table using Javascript. The snippet below is capable of doing so, but only for the whole table.
The advanced filter would be able to search for index=1 - the way I came up with (but unable to code it) is by binding the headers, e.g. <th>Index</th> as criteria.
$(document).ready(function() {
$("#search").keyup(function () {
var searchTerm = $("#search").val();
var listItem = $('.results tbody').children('tr');
var searchSplit = searchTerm.replace(/ /g, "'):containsi('")
$.extend($.expr[':'], {'containsi': function(elem, i, match, array){
return (elem.textContent || elem.innerText || '').toLowerCase().indexOf((match[3] || "").toLowerCase()) >= 0;
}
});
$(".results tbody tr").not(":containsi('" + searchSplit + "')").each(function(e){
$(this).attr('visible','false');
});
$(".results tbody tr:containsi('" + searchSplit + "')").each(function(e){
$(this).attr('visible','true');
});
// Search Count item hits
var jobCount = $('.results tbody tr[visible="true"]').length;
$('.counter').text(jobCount + ' item');
if(jobCount == '0') {$('.no-result').show();}
else {$('.no-result').hide();}
});
// Parameter Passing
var queryString = new Array();
$(function() {
if (queryString.length == 0) {
if (window.location.search.split('?').length > 1) {
var params = window.location.search.split('?')[1].split('&');
for (var i = 0; i < params.length; i++) {
var key = params[i].split('=')[0];
var value = decodeURIComponent(params[i].split('=')[1]);
queryString[key] = value;
}
}
}
if (queryString["id"] != null) {
$('#search').val(queryString["id"])
}
});
});
.results tr[visible='false'],
.no-result{
display:none;
}
.results tr[visible='true']{
display:table-row;
}
.counter{
padding:8px;
color:#ccc;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group pull-right">
<input type="text" class="form-control" id="search" placeholder="search">
</div>
<span class="counter pull-right"></span>
<table class="table table-condensed table-hover results">
<thead>
<tr>
<th>Index</th>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
<tr class="warning no-result">
<td colspan="4"><i class="fa fa-warning"></i> No result</td>
</tr>
</thead>
<tbody>
<tr>
<td>112</td>
<td>Content112</td>
<td>Content2</td>
<td>Content329</td>
</tr>
<tr>
<td>123</td>
<td>SomeOtherContent112</td>
<td>SomeOtherContent123</td>
<td>SomeOtherContent3</td>
</tr>
<tr>
<td>329</td>
<td>DifferentContent123</td>
<td>DifferentContent2</td>
<td>DifferentContent329</td>
</tr>
</tbody>
</table>
I have multiple tbody in a table which some of span columns and rows. And then I got a jQuery code to sort this tbody based on the th.data- click.
In the first th column when it is clicked it will sort correctly. However, in the second th column when it is clicked it does not sort the tbody.
Here is the snippet :
var table = $('table'),
th = table.find('thead th'),
tbody = table.find('tbody');
$(th).on('click', function() {
$(th).removeClass();
var index = this.cellIndex,
sortType = $(this).data('sort'),
sortDir = $(this).data('dir') || 'asc';
var that = $(this);
$('table').find('tbody').slice().sort(function(a, b) {
var dataTH = that.data('class');
//alert(dataTH);
if(dataTH == 'number')
{
//alert("hi this is a number");
var aText = $(a).find('td.sortNum:eq(' + index + ')').text(),
bText = $(b).find('td.sortNum:eq(' + index + ')').text();
}
else if(dataTH == 'department')
{
//alert("hi this is a department");
var aText = $(a).find('td.depart:eq(' + index + ')').text(),
bText = $(b).find('td.depart:eq(' + index + ')').text();
}
if (sortDir == 'desc') {
temp = aText;
aText = bText;
bText = temp;
}
if (sortType == 'string') {
return aText.localeCompare(bText);
}
else {
return +aText - +bText;
}
})
.appendTo('table');
$(this).data('dir', sortDir == 'asc' ? 'desc' : 'asc');
$(this).removeClass().addClass('sort-' + sortDir);
});
table {
border-collapse: collapse;
width: 400px;
}
th, td {
padding: 5px;
border: 1px #DDD solid;
}
.sort-asc:after,
.sort-desc:after {
content: '▲';
font-size: 12px;
}
.sort-desc:after {
content: '▼';
}
<table>
<thead>
<tr>
<th data-sort="number" data-class="number" >No</th>
<th data-sort="number" data-class="department" >Department</th>
<th data-sort="number">Quantity</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2" class="sortNum">1</td>
<td class="depart">20</td>
<td>20</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">VTP</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2" class="sortNum">2</td>
<td class="depart">30</td>
<td>25</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">VTP</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2" class="sortNum">3</td>
<td class="depart">40</td>
<td>50</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">VTP</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2" class="sortNum">4</td>
<td class="depart">50</td>
<td>15</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">VTP</td>
</tr>
</tbody>
<tbody>
<tr>
<td rowspan="2" class="sortNum">5</td>
<td class="depart">60</td>
<td>32</td>
</tr>
<tr>
<td colspan="2" style="text-align:center">VTP</td>
</tr>
</tbody>
</table>
You do not need the :eq Selector since you are referencing the Cells by css class. It does work in the first Column because the cell index is zero. What you are essentially saying in the selector $(a).find('td.sortNum:eq(' + index + ')') is "give me the list of td's with the class 'sortNum' and of that list the element at position index. But the first condition of the Selector - td.sortNum - will only return one element.
To make your sorting work again for the second column you could get rid of the :eq part
if(dataTH == 'number')
{
//alert("hi this is a number");
var aText = $(a).find('td.sortNum').text(),
bText = $(b).find('td.sortNum').text();
}
else if(dataTH == 'department')
{
//alert("hi this is a department");
var aText = $(a).find('td.depart').text(),
bText = $(b).find('td.depart').text();
}
see also http://jsfiddle.net/doc_snyder/Lvvmow8g/1/