উত্তর:
আপনি যদি সমস্ত ঘণ্টা এবং হুইসেলগুলি এড়াতে চান তবে আমি এই সাধারণ 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এইচটিএমএল হুবহু এক নয়, আমারও থিয়েড এবং টবয় আছে, আপনি কি দয়া করে আমাকে এই সাহায্য করতে পারেন?
$.text([a]) == $.text([b])ব্যবহারের পরিবর্তে $.text([a]).toUpperCase() == $.text([b]).toUpperCase()এটি ঠিক করবে will
আমি এটি পেরিয়ে এসেছি এবং ভেবেছিলাম আমার 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/
আশ্চর্যজনকভাবে সহজ ... আপনি যদি ডিওএম প্রতিস্থাপনের রুটে যান (যেমন, একটি টেবিল তৈরি করে ডেটা টেবিলগুলি পুনরায় ফর্ম্যাট করতে দেয়) তবে আপনার টেবিলটি ফর্ম্যাট করে নিশ্চিত করুন <thead>এবং <tbody>এটি কার্যকর হবে না তা নিশ্চিত করুন । এটাই একমাত্র গোটার কথা।
এজ্যাক্স ইত্যাদির জন্যও সমর্থন রয়েছে, যেমন কোডের সমস্ত সত্যই ভাল টুকরো যেমন এটি সমস্ত বন্ধ করে দেওয়া খুব সহজ। যদিও আপনি যা ব্যবহার করতে পারেন তা অবাক করে দিন। আমি একটি "বেয়ার" ডেটা টেবিল দিয়ে শুরু করেছি যা কেবল একটি ক্ষেত্রকে বাছাই করেছিলাম এবং তারপরে বুঝতে পেরেছিলাম যে কয়েকটি বৈশিষ্ট্য সত্যই আমি যা করছি তার সাথে প্রাসঙ্গিক। ক্লায়েন্টরা নতুন বৈশিষ্ট্যগুলি ভালবাসেন।
পূর্ণ থিমরোলার সহায়তার জন্য ডেটা টেবিলগুলিতে বোনাস পয়েন্ট করে ....
আমি টেবিলসোর্টারের সাথে ভাগ্যও পেয়েছি, তবে এটি প্রায় সহজ নয়, বেশিরভাগ ডকুমেন্টেড নয়, এবং কেবলমাত্র বৈশিষ্ট্যও রয়েছে।
আমরা কেবল এই চটজল সরঞ্জামটি ব্যবহার শুরু করেছি: 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 সারি রয়েছে, তবে আমার প্রশ্ন: টেবিলটিকে বাছাইযোগ্য করার কী লাভ? যথাযথ বাছাই করার জন্য, আপনাকে কোয়েরিটি আবার ডাটাবেসে প্রেরণ করতে হবে এবং ডাটাবেসটি (একটি সরঞ্জাম যা আসলে তথ্য সাজানোর জন্য ডিজাইন করা হয়েছিল) আপনাকে বাছাই করতে দেয়।
আপনার প্রশ্নের সরাসরি উত্তরে যদিও, আমি জুড়ে এসেছি সর্বাধিক বাছাই অ্যাড অন on আমি এই অ্যাড-অনটি পছন্দ করি না এমন অনেকগুলি কারণ রয়েছে ("আপনি যেমন বলছেন তেমন অপ্রয়োজনীয় ঘণ্টা এবং হুইসেলস ...", তবে সাজানোর দিক থেকে এটির সেরা বৈশিষ্ট্যগুলির মধ্যে একটি হ'ল এটি এজাক্স ব্যবহার করে এবং না করে ' টি ধরে নেই যে আপনি এটি ইতিমধ্যে সমস্ত ডেটা সাজানোর আগেই এটি পাস করে দিয়েছেন।
আমি বুঝতে পারি যে এই উত্তরটি আপনার প্রয়োজনীয়তার জন্য সম্ভবত ওভারকিল (এবং 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
আমি এই গৃহীত উত্তরটি পছন্দ করি, তবে খুব কমই আপনি এইচটিএমএল বাছাই করার প্রয়োজনীয়তা পান এবং বাছাইয়ের দিক নির্দেশ করে আইকন যুক্ত করতে হয় না। আমি গ্রহণযোগ্য উত্তরের ব্যবহারের উদাহরণ গ্রহণ করেছি এবং তাড়াতাড়ি আমার প্রকল্পে বুটস্ট্র্যাপ যুক্ত করে এবং নিম্নলিখিত কোডটি যুক্ত করে তা দ্রুত সমাধান করেছি:
<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();
}এখানে একটি ডেমো রয়েছে । - আপনাকে ফায়ারফক্স বা আইইতে ডেমো চালাতে হবে, বা ডেমোটি কাজ করার জন্য ক্রোমের মাইম টাইপ চেকিং অক্ষম করতে হবে। এটি বাহ্যিক সংস্থান হিসাবে গৃহীত উত্তরের মাধ্যমে সংযুক্ত, বাছাই করা উপাদানগুলি প্লাগইনের উপর নির্ভর করে। শুধু একটি মাথা আপ!
এখানে একটি চার্ট রয়েছে যা কোনটি ব্যবহার করবেন তা সিদ্ধান্ত নিতে সহায়ক হতে পারে: http://blog.sematext.com/2011/09/19/top-javascript-dynamic-table-libraries/
@ নিক গ্রিলির উত্তর দুর্দান্ত, তবে এটি rowspanসারণী শিরোনাম কোষগুলির সম্ভাব্য বৈশিষ্ট্যগুলিকে বিবেচনা করে না (এবং সম্ভবত অন্যান্য উত্তরগুলি এটিও দেয় না)। এখানে @ নিক গ্রেইলের উত্তরের একটি উন্নতি দেওয়া হয়েছে যা এটি স্থির করে। এই উত্তরের উপরও ভিত্তি করে (ধন্যবাদ @ অ্যান্ড্রু অরলভ)।
পুরানো jQuery সংস্করণগুলির সাথে এটি কাজ করার জন্য আমি $.isNumericএকটি কাস্টম উইন্ডো (ধন্যবাদ @ জাজাদ) দিয়ে প্রতিস্থাপন করেছি ।
এটি সক্রিয় করতে, যোগ 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 প্লাগইন ( ব্রিডজেস) ব্যবহার করতে পারেন ) যা সাজান, ফিল্টার এবং সরবরাহ করে:
এইচটিএমএল:
<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;
}এইচটিএমএল টেবিলটি বাছাই করার জন্য অন্য পদ্ধতি। ( ডাব্লু 3। জেএসএমএল এইচটিএমএল বাছুর উপর ভিত্তি করে )
/* 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 এর সাথে মিলিত হয়েছে হয়েছে তবে প্রকল্পটিতে আইকন বা ফন্টউইজ যুক্ত করতে চান না। সারণি-কলাম-এএসসি / ডেস্কের জন্য সিএসএস শৈলীগুলি আমি রঙ, প্যাডিং, বৃত্তাকার সীমানা করেছিলাম।
আমি ক্লাসে যেতে চেয়ে এটি পরিবর্তিত করেছিলাম না বরং আমরা কোনটি বাছাইযোগ্য তা নিয়ন্ত্রণ করতে পারি। এটি আরও কার্যকর হতে পারে যদি দুটি টেবিল থাকে তবে এর জন্য আরও সংশোধন করা দরকার।
শরীর:
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
খুব সহজ, খুব সহজ, ধন্যবাদ nandhp ...
$('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;
});দেই উমা মেলহোড়ডা চোদিগো
একটা ওয়ান চোড ভাল!
সর্বদা সমস্ত থলে সমস্ত টেবিলের জন্য ফাংশন ... এটি দেখুন!
ডেমো
.live()।