【发布时间】：2021-09-11 10:49:42
【问题描述】：
我正在为我的应用程序创建一个可排序的自定义表。当我有多个可排序的表时，问题就来了。
最后一个表格的排序工作正常，但是当我点击第一个表格标题时，所有其他表格也会被排序。
我所做的所有排序和过滤都在下面的库中
var IlForCustomTables = IlForCustomTables || {};
我只想知道为什么当我单击第一个表时其他表会被排序，以及我该如何解决这个问题。
var IlForCustomTables = IlForCustomTables || {};
IlForCustomTables = {
//Basic Table
BindTableDataBasic: function(DivId, Headers, Body, startIndex) {
for (let i = 0; i < Body.length; i++) {
$('#' + DivId).find('.tbody').append('<tr class="tbody' + i + '"></tr>');
for (let a = 0; a < Headers.length; a++) {
if (a < startIndex)
$('#' + DivId).find('.tbody').find('.tbody' + i).append('<td></td>');
else
$('#' + DivId).find('.tbody').find('.tbody' + i).append('<td>' + Body[i][Headers[a].replace(/ /g, '')] + '</td>');
}
}
},
BindCustomTable: function(DivId, Headers, Body, startIndex, filter, sorting) {
let filterInput = '';
if (filter)
filterInput = '<input type="text" class="filterInput" />';
$('#' + DivId).append(filterInput + '<div class="table-responsive"><table class="table table-bordered"><thead><tr class="thead"></tr></thead><tbody class="tbody tbody_' + DivId + '"></tbody></table></div>');
for (let i = 0; i < Headers.length; i++) {
$('#' + DivId).find('.thead').append('<th class="SortTableHeader">' + Headers[i] + '</th>');
}
IlForCustomTables.BindTableDataBasic(DivId, Headers, Body, startIndex);
if (sorting)
$('.SortTableHeader').click(function() {
IlForCustomTables.CustomSorting(DivId, $(this).index());
});
if (filter)
$('.filterInput').keyup(function() {
IlForCustomTables.CustomFilter(DivId);
});
},
CustomFilter: function(DivId) {
var input, filter, table, tr, td, i, txtValue;
input = $('#' + DivId).find('.filterInput');
filter = input.val().toUpperCase();
table = $('#' + DivId).find('.table');
tr = table.find('.tbody').find('tr');
for (i = 0; i < tr.length; i++) {
let found = false;
for (let a = 0; a < tr[i].getElementsByTagName("td").length; a++) {
td = tr[i].getElementsByTagName("td")[a];
if (td) {
txtValue = td.textContent || td.innerText;
if (txtValue.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
found = true;
}
}
}
if (!found)
tr[i].style.display = "none";
}
},
CustomSorting: function(DivId, index) {
const table = $('.tbody_' + DivId)[0];
Array.from(table.querySelectorAll('tr:nth-child(n+1)'))
.sort(comparer(index, this.asc = !this.asc))
.forEach(tr => table.appendChild(tr));
}
}
const getCellValue = (tr, idx) => tr.children[idx].innerText || tr.children[idx].textContent;
const comparer = (idx, asc) => (a, b) => ((v1, v2) =>
v1 !== '' && v2 !== '' && !isNaN(v1) && !isNaN(v2) ? v1 - v2 : v1.toString().localeCompare(v2)
)(getCellValue(asc ? a : b, idx), getCellValue(asc ? b : a, idx));
const TableHeader = ['Action', 'Id', 'Name', 'Age', 'Area Name', ' Work Experience'];
const TableHeader1 = ['Action', 'Id', 'Full Name', 'Current Age', 'Native Place', ' Work Experience'];
const TableData = [{
'Id': '1',
'Name': 'Ibrahim',
'Age': '27',
'AreaName': 'Wadala',
'WorkExperience': '5'
},
{
'Id': '2',
'Name': 'Rohit',
'Age': '30',
'AreaName': 'Kalyan',
'WorkExperience': '6'
},
{
'Id': '3',
'Name': 'Kunal',
'Age': '32',
'AreaName': 'Andheri',
'WorkExperience': '7'
},
{
'Id': '4',
'Name': 'Yogesh',
'Age': '38',
'AreaName': 'Borivali',
'WorkExperience': '8'
},
{
'Id': '5',
'Name': 'Varun',
'Age': '36',
'AreaName': 'Seawoods',
'WorkExperience': '9'
},
];
const TableData1 = [{
'Id': '1',
'FullName': 'Ibrahim S',
'CurrentAge': '27',
'NativePlace': 'Bangalore',
'WorkExperience': '5'
},
{
'Id': '2',
'FullName': 'Rohit D',
'CurrentAge': '30',
'NativePlace': 'Pune',
'WorkExperience': '6'
},
{
'Id': '3',
'FullName': 'Kunal D',
'CurrentAge': '32',
'NativePlace': 'Gujarat',
'WorkExperience': '7'
},
{
'Id': '4',
'FullName': 'Yogesh R',
'CurrentAge': '38',
'NativePlace': 'Kankavali',
'WorkExperience': '8'
},
{
'Id': '5',
'FullName': 'Varun S',
'CurrentAge': '36',
'NativePlace': 'Gujarat',
'WorkExperience': '9'
},
];
$(document).ready(function() {
IlForCustomTables.BindCustomTable('ICGrid3', TableHeader1, TableData1, 1, false, true);
IlForCustomTables.BindCustomTable('ICGrid4', TableHeader1, TableData1, 1, true, true);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ICGrid1"></div>
<div id="ICGrid2"></div>
<div id="ICGrid3"></div>
<div id="ICGrid4"></div>这是我上面代码的Fiddle。
【问题讨论】：
标签： javascript jquery sorting