मेरे पास 4 कॉलम के साथ एक बहुत ही सरल HTML तालिका है:
Facility Name, Phone #, City, Specialtyमैं चाहता हूं कि उपयोगकर्ता केवल सुविधा नाम और शहर के आधार पर छाँट सके ।
मैं jQuery का उपयोग करके इसे कैसे कोड कर सकता हूं?
जवाबों:
यदि आप सभी घंटियाँ और सीटी बजाना चाहते हैं तो मैं इस सरल sortElementsप्लगइन का सुझाव दे सकता हूँ । उपयोग:
var table = $('table');
$('.sortable th')
.wrapInner('<span title="sort this column"/>')
.each(function(){
var th = $(this),
thIndex = th.index(),
inverse = false;
th.click(function(){
table.find('td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
if( $.text([a]) == $.text([b]) )
return 0;
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
});
});और एक डेमो। (सॉर्ट करने के लिए "शहर" और "सुविधा" कॉलम-हेडर पर क्लिक करें)
Error: illegal characterकि html बिल्कुल समान नहीं है, मेरे पास थ्रेड और टोबे भी हैं, क्या आप कृपया मुझे इसमें मदद कर सकते हैं?
$.text([a]) == $.text([b])उपयोग $.text([a]).toUpperCase() == $.text([b]).toUpperCase()करने के बजाय इसे ठीक कर देंगे।
मुझे यह पता चला, और मैंने सोचा कि मैं अपने 2 सेंट में फेंक दूंगा। आरोही क्रमबद्ध करने के लिए कॉलम हेडर पर क्लिक करें, और फिर अवरोही क्रमबद्ध करने के लिए।
$('th').click(function(){
var table = $(this).parents('table').eq(0)
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
this.asc = !this.asc
if (!this.asc){rows = rows.reverse()}
for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index), valB = getCellValue(b, index)
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
}
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }table, th, td {
border: 1px solid black;
}
th {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr><th>Country</th><th>Date</th><th>Size</th></tr>
<tr><td>France</td><td>2001-01-01</td><td>25</td></tr>
<tr><td><a href=#>spain</a></td><td>2005-05-05</td><td></td></tr>
<tr><td>Lebanon</td><td>2002-02-02</td><td>-17</td></tr>
<tr><td>Argentina</td><td>2005-04-04</td><td>100</td></tr>
<tr><td>USA</td><td></td><td>-6</td></tr>
</table>td, जैसे <a href="#">Test</a>कि छँटाई का संबंध है <a...। केवल पाठ के आधार पर छाँटने के लिए आपको html()अंतिम पंक्ति में बदलना होगा text()।
comparer(..)यदि आप वास्तव में जानते हैं कि आप किस प्रारूप का समर्थन करना चाहते हैं, तो आप फिर से लिख सकते हैं )। इस बीच, यदि आप उपयोग करते हैं, तो आपके लिए डेटा yyyy-MM-dd" string" क्रमबद्ध हो जाएगा। उदा। jsbin.com/pugedip/1
अब तक, मैंने जो सबसे आसान प्रयोग किया है वह है: http://datatables.net/
आश्चर्यजनक सरल ... बस यकीन है कि अगर आप डोम प्रतिस्थापन मार्ग जाना (आईई, एक मेज के निर्माण और दे उसे पुन: प्रारूपित DataTables) बनाने के तो यकीन के साथ अपनी मेज फ़ॉर्मेट करने के लिए बनाने के <thead>लिए और <tbody>या यह काम नहीं करेगा। यह एकमात्र गोच के बारे में है।
AJAX आदि के लिए भी समर्थन है, कोड के सभी बहुत अच्छे टुकड़ों के साथ, यह सब बंद करना भी बहुत आसान है। आपको आश्चर्य होगा कि आप क्या उपयोग कर सकते हैं, हालांकि। मैंने एक "नंगे" डेटाटेबल के साथ शुरू किया जो केवल एक क्षेत्र को छाँटता था और फिर महसूस करता था कि कुछ विशेषताएं वास्तव में मैं क्या कर रहा हूँ के लिए प्रासंगिक था। ग्राहक नई सुविधाओं से प्यार करते हैं।
पूर्ण ThemeRoller समर्थन के लिए DataTables के लिए बोनस अंक ...।
मैं भी तालिकाओं के साथ ठीक भाग्य था, लेकिन यह लगभग उतना आसान नहीं है, बहुत अच्छी तरह से प्रलेखित नहीं है, और केवल ठीक विशेषताएं हैं।
हमने अभी इस स्लीक टूल का उपयोग शुरू किया: https://plugins.jquery.com/tablesorter/
इसके उपयोग पर एक वीडियो है: http://www.highoncoding.com/Articles/695_Sorting_GridView_Using_JQuery_TableSorter_Plug_in.aspx
$('#tableRoster').tablesorter({
headers: {
0: { sorter: false },
4: { sorter: false }
}
});एक साधारण टेबल के साथ
<table id="tableRoster">
<thead>
<tr>
<th><input type="checkbox" class="rCheckBox" value="all" id="rAll" ></th>
<th>User</th>
<th>Verified</th>
<th>Recently Accessed</th>
<th> </th>
</tr>
</thead>मेरा जवाब "सावधान" होगा। बहुत सारे jQuery के टेबल-सॉर्टिंग ऐड-ऑन केवल उसी प्रकार को सॉर्ट करते हैं जो आप ब्राउज़र में पास करते हैं। कई मामलों में, आपको यह ध्यान रखना होगा कि टेबल डेटा के डायनामिक सेट हैं, और इनमें संभवतः डेटा की लाइनों के ज़िलियन हो सकते हैं।
आप उल्लेख करते हैं कि आपके पास केवल 4 कॉलम हैं, लेकिन इससे भी महत्वपूर्ण बात यह है कि आप यह उल्लेख नहीं करते हैं कि हम यहां कितनी पंक्तियों के बारे में बात कर रहे हैं।
यदि आप डेटाबेस से ब्राउज़र में 5000 लाइनें पास करते हैं, तो यह जानकर कि वास्तविक डेटाबेस-तालिका में 100,000 पंक्तियाँ हैं, मेरा सवाल है: तालिका को क्रमबद्ध बनाने में क्या बात है? एक उचित प्रकार करने के लिए, आपको क्वेरी को डेटाबेस में वापस भेजना होगा, और डेटाबेस (एक उपकरण जो वास्तव में डेटा को सॉर्ट करने के लिए डिज़ाइन किया गया है) को आपके लिए सॉर्टिंग करने दें।
आपके प्रश्न के सीधे उत्तर में, हालांकि, मेरे द्वारा आया सबसे अच्छा छँटाई ऐड-ऑन इंग्रिड है। कई कारण हैं कि मुझे यह ऐड-ऑन पसंद नहीं है ("अनावश्यक घंटियाँ और सीटी ..." जैसा कि आप इसे कहते हैं), लेकिन यह सॉर्ट के संदर्भ में सबसे अच्छी विशेषताओं में से एक है, यह है कि यह अजाक्स का उपयोग करता है, और doesn ' टी मान लें कि आपने पहले ही अपना डेटा छाँट लिया है, इससे पहले कि वह अपनी छँटाई करे।
मैं मानता हूं कि यह उत्तर शायद आपकी आवश्यकताओं के लिए ओवरकिल (और 2 साल से अधिक देर) है, लेकिन जब मेरे क्षेत्र के डेवलपर्स इस बिंदु को नजरअंदाज करते हैं तो मुझे गुस्सा आता है। इसलिए मुझे उम्मीद है कि कोई और इस पर चुटकी लेगा।
मैं अब बेहतर महसूस कर रहा हूं।
यह तालिका छाँटने का एक अच्छा तरीका है:
$(document).ready(function () {
$('th').each(function (col) {
$(this).hover(
function () {
$(this).addClass('focus');
},
function () {
$(this).removeClass('focus');
}
);
$(this).click(function () {
if ($(this).is('.asc')) {
$(this).removeClass('asc');
$(this).addClass('desc selected');
sortOrder = -1;
} else {
$(this).addClass('asc selected');
$(this).removeClass('desc');
sortOrder = 1;
}
$(this).siblings().removeClass('asc selected');
$(this).siblings().removeClass('desc selected');
var arrData = $('table').find('tbody >tr:has(td)').get();
arrData.sort(function (a, b) {
var val1 = $(a).children('td').eq(col).text().toUpperCase();
var val2 = $(b).children('td').eq(col).text().toUpperCase();
if ($.isNumeric(val1) && $.isNumeric(val2))
return sortOrder == 1 ? val1 - val2 : val2 - val1;
else
return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0;
});
$.each(arrData, function (index, row) {
$('tbody').append(row);
});
});
});
}); table, th, td {
border: 1px solid black;
}
th {
cursor: pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr><th>id</th><th>name</th><th>age</th></tr>
<tr><td>1</td><td>Julian</td><td>31</td></tr>
<tr><td>2</td><td>Bert</td><td>12</td></tr>
<tr><td>3</td><td>Xavier</td><td>25</td></tr>
<tr><td>4</td><td>Mindy</td><td>32</td></tr>
<tr><td>5</td><td>David</td><td>40</td></tr>
</table>फिडल यहां पाया जा सकता है:
https://jsfiddle.net/e3s84Luw/
स्पष्टीकरण यहाँ पाया जा सकता है: https://www.learningjquery.com/2017/03/how-to-sort-html-table-using-jquery-code
मुझे यह स्वीकार किया गया उत्तर पसंद है, हालांकि, शायद ही कभी आपको html को सॉर्ट करने की आवश्यकता होती है और न कि सॉर्टिंग दिशा को इंगित करने वाले आइकन जोड़ना पड़ता है। मैंने उत्तर के उपयोग के उदाहरण को स्वीकार किया और तय किया कि जल्दी से अपने प्रोजेक्ट में बूटस्ट्रैप जोड़कर, और निम्नलिखित कोड जोड़कर:
<div></div>
प्रत्येक के अंदर <th>ताकि आपके पास आइकन सेट करने के लिए एक जगह हो।
setIcon(this, inverse);
स्वीकार किए गए उत्तर के उपयोग से, रेखा के नीचे:
th.click(function () {
और setIcon विधि को जोड़कर:
function setIcon(element, inverse) {
var iconSpan = $(element).find('div');
if (inverse == false) {
$(iconSpan).removeClass();
$(iconSpan).addClass('icon-white icon-arrow-up');
} else {
$(iconSpan).removeClass();
$(iconSpan).addClass('icon-white icon-arrow-down');
}
$(element).siblings().find('div').removeClass();
}यहाँ एक डेमो है । - आपको या तो फ़ायरफ़ॉक्स या IE में डेमो चलाने की ज़रूरत है, या काम करने के लिए क्रोम के MIME-प्रकार की जाँच अक्षम करें। यह सॉर्टलाइज़ प्लगिन पर निर्भर करता है, जो स्वीकृत उत्तर से जुड़ा होता है, बाहरी संसाधन के रूप में। बिलकुल चौकन्ना!
यहां एक चार्ट दिया गया है जो यह तय करने में सहायक हो सकता है कि किसका उपयोग करना है: http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-lbooks/
@ निक ग्रीली का जवाब बहुत अच्छा है, लेकिन यह rowspanटेबल हेडर कोशिकाओं की संभावित विशेषताओं को ध्यान में नहीं रखता है (और शायद अन्य उत्तर भी ऐसा नहीं करते हैं)। यहां @Nick Grealy के उत्तर का सुधार है जो इसे ठीक करता है। इस उत्तर के आधार पर भी (धन्यवाद @ ऑरंडोव)।
मैंने पुराने jQuery संस्करणों के साथ काम करने के लिए $.isNumericफ़ंक्शन को कस्टम एक (धन्यवाद @zad) के साथ बदल दिया है ।
इसे सक्रिय class="sortable"करने के लिए, <table>टैग में जोड़ें ।
$(document).ready(function() {
$('table.sortable th').click(function(){
var table = $(this).parents('table').eq(0);
var column_index = get_column_index(this);
var rows = table.find('tbody tr').toArray().sort(comparer(column_index));
this.asc = !this.asc;
if (!this.asc){rows = rows.reverse()};
for (var i = 0; i < rows.length; i++){table.append(rows[i])};
})
});
function comparer(index) {
return function(a, b) {
var valA = getCellValue(a, index), valB = getCellValue(b, index);
return isNumber(valA) && isNumber(valB) ? valA - valB : valA.localeCompare(valB);
}
}
function getCellValue(row, index){ return $(row).children('td').eq(index).html() };
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
function get_column_index(element) {
var clickedEl = $(element);
var myCol = clickedEl.closest("th").index();
var myRow = clickedEl.closest("tr").index();
var rowspans = $("th[rowspan]");
rowspans.each(function () {
var rs = $(this);
var rsIndex = rs.closest("tr").index();
var rsQuantity = parseInt(rs.attr("rowspan"));
if (myRow > rsIndex && myRow <= rsIndex + rsQuantity - 1) {
myCol++;
}
});
// alert('Row: ' + myRow + ', Column: ' + myCol);
return myCol;
};आप एक jQuery प्लगइन ( ब्रीडज ) का उपयोग कर सकते हैं जो सॉर्ट, फ़िल्टर और पेजिनेशन प्रदान करता है:
HTML:
<table>
<thead>
<tr>
<th sort='name'>Name</th>
<th>Phone</th>
<th sort='city'>City</th>
<th>Speciality</th>
</tr>
</thead>
<tbody>
<tr b-scope="people" b-loop="person in people">
<td b-sort="name">{{person.name}}</td>
<td>{{person.phone}}</td>
<td b-sort="city">{{person.city}}</td>
<td>{{person.speciality}}</td>
</tr>
</tbody>
</table>जे एस:
$(function(){
var data = {
people: [
{name: 'c', phone: 123, city: 'b', speciality: 'a'},
{name: 'b', phone: 345, city: 'a', speciality: 'c'},
{name: 'a', phone: 234, city: 'c', speciality: 'b'},
]
};
breed.run({
scope: 'people',
input: data
});
$("th[sort]").click(function(){
breed.sort({
scope: 'people',
selector: $(this).attr('sort')
});
});
});यह ब्राउज़र / एस को नहीं लटकाता है, आगे आसान विन्यास योग्य है:
var table = $('table');
$('th.sortable').click(function(){
var table = $(this).parents('table').eq(0);
var ths = table.find('tr:gt(0)').toArray().sort(compare($(this).index()));
this.asc = !this.asc;
if (!this.asc)
ths = ths.reverse();
for (var i = 0; i < ths.length; i++)
table.append(ths[i]);
});
function compare(idx) {
return function(a, b) {
var A = tableCell(a, idx), B = tableCell(b, idx)
return $.isNumeric(A) && $.isNumeric(B) ?
A - B : A.toString().localeCompare(B)
}
}
function tableCell(tr, index){
return $(tr).children('td').eq(index).text()
}जेम्स की प्रतिक्रिया के लिए मैं इसे और अधिक सार्वभौमिक बनाने के लिए केवल छँटाई समारोह को बदल दूंगा। इस तरह यह पाठ वर्णमाला और संख्याओं की तरह क्रमबद्ध हो जाएगा।
if( $.text([a]) == $.text([b]) )
return 0;
if(isNaN($.text([a])) && isNaN($.text([b]))){
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}
else{
return parseInt($.text([a])) > parseInt($.text([b])) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}HTML तालिका को सॉर्ट करने के लिए एक और तरीका। ( W3.JS HTML सॉर्ट पर आधारित )
/* Facility Name */
$('#bioTable th:eq(0)').addClass("control-label pointer");
/* Phone # */
$('#bioTable th:eq(1)').addClass("not-allowed");
/* City */
$('#bioTable th:eq(2)').addClass("control-label pointer");
/* Specialty */
$('#bioTable th:eq(3)').addClass("not-allowed");
var collection = [{
"FacilityName": "MinION",
"Phone": "999-8888",
"City": "France",
"Specialty": "Genetic Prediction"
}, {
"FacilityName": "GridION X5",
"Phone": "999-8812",
"City": "Singapore",
"Specialty": "DNA Assembly"
}, {
"FacilityName": "PromethION",
"Phone": "929-8888",
"City": "San Francisco",
"Specialty": "DNA Testing"
}, {
"FacilityName": "iSeq 100 System",
"Phone": "999-8008",
"City": "Christchurch",
"Specialty": "gDNA-mRNA sequencing"
}]
$tbody = $("#bioTable").append('<tbody></tbody>');
for (var i = 0; i < collection.length; i++) {
$tbody = $tbody.append('<tr class="item"><td>' + collection[i]["FacilityName"] + '</td><td>' + collection[i]["Phone"] + '</td><td>' + collection[i]["City"] + '</td><td>' + collection[i]["Specialty"] + '</td></tr>');
}.control-label:after {
content: "*";
color: red;
}
.pointer {
cursor: pointer;
}
.not-allowed {
cursor: not-allowed;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.w3schools.com/lib/w3.js"></script>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet" />
<p>Click the <strong>table headers</strong> to sort the table accordingly:</p>
<table id="bioTable" class="w3-table-all">
<thead>
<tr>
<th onclick="w3.sortHTML('#bioTable', '.item', 'td:nth-child(1)')">Facility Name</th>
<th>Phone #</th>
<th onclick="w3.sortHTML('#bioTable', '.item', 'td:nth-child(3)')">City</th>
<th>Specialty</th>
</tr>
</thead>
</table>मैं निक के जवाब का उपयोग कर समाप्त हो गया (सबसे लोकप्रिय लेकिन उसे स्वीकार नहीं) https://stackoverflow.com/a/19947532/5271220
और इसे https://stackoverflow.com/a/16819442/5271220 के साथ संयोजित किया लेकिन प्रोजेक्ट में आइकन या फ़ॉन्ट जोड़ना नहीं चाहते थे। सॉर्ट-कॉलम- asc / desc के लिए सीएसएस शैलियों मैंने रंग, पैडिंग, गोल बॉर्डर किया।
मैंने इसे कक्षा द्वारा जाने के लिए भी संशोधित किया, ताकि हम नियंत्रित कर सकें कि कौन से छांटे गए हैं। यह बाद में भी काम आ सकता है यदि दो तालिकाओं हों, हालांकि इसके लिए अधिक संशोधनों की आवश्यकता होगी।
तन:
html += "<thead>\n";
html += "<th></th>\n";
html += "<th class=\"sort-header\">Name <span></span></i></th>\n";
html += "<th class=\"sort-header\">Status <span></span></th>\n";
html += "<th class=\"sort-header\">Comments <span></span></th>\n";
html += "<th class=\"sort-header\">Location <span></span></th>\n";
html += "<th nowrap class=\"sort-header\">Est. return <span></span></th>\n";
html += "</thead>\n";
html += "<tbody>\n"; ...... शरीर को और नीचे गिरा दिया
$("body").on("click", ".sort-header", function (e) {
var table = $(this).parents('table').eq(0)
var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
this.asc = !this.asc
if (!this.asc) { rows = rows.reverse() }
for (var i = 0; i < rows.length; i++) { table.append(rows[i]) }
setIcon(e.target, this.asc);
});कार्य:
function comparer(index) {
return function (a, b) {
var valA = getCellValue(a, index), valB = getCellValue(b, index)
return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
}
}
function getCellValue(row, index) {
return $(row).children('td').eq(index).text()
}
function setIcon(element, inverse) {
var iconSpan = $(element).find('span');
if (inverse == true) {
$(iconSpan).removeClass();
$(iconSpan).addClass('sort-column-asc');
$(iconSpan)[0].innerHTML = " ↑ " // arrow up
} else {
$(iconSpan).removeClass();
$(iconSpan).addClass('sort-column-desc');
$(iconSpan)[0].innerHTML = " ↓ " // arrow down
}
$(element).siblings().find('span').each(function (i, obj) {
$(obj).removeClass();
obj.innerHTML = "";
});
}मेरा वोट! jquery.sortElements.js और सरल jquery
बहुत सरल, बहुत आसान, धन्यवाद नंदप ...
$('th').live('click', function(){
var th = $(this), thIndex = th.index(), var table = $(this).parent().parent();
switch($(this).attr('inverse')){
case 'false': inverse = true; break;
case 'true:': inverse = false; break;
default: inverse = false; break;
}
th.attr('inverse',inverse)
table.find('td').filter(function(){
return $(this).index() === thIndex;
}).sortElements(function(a, b){
return $.text([a]) > $.text([b]) ?
inverse ? -1 : 1
: inverse ? 1 : -1;
}, function(){
// parentNode is the element we want to move
return this.parentNode;
});
inverse = !inverse;
});Dei uma melhorada do código
एक कॉड बेहतर!
सभी समय में सभी तालिकाओं के लिए फ़ंक्शन ... इसे देखें!
डेमो
.live()।