jQuery實現(xiàn)的表格前端排序功能示例
本文實例講述了jQuery實現(xiàn)的表格前端排序功能。分享給大家供大家參考,具體如下:
表格前端按列排序
依賴jQuery(本例使用jQuery-1.8.2)
1.初始化方法
(function($){
//插件
$.extend($,{
//命名空間
sortTable:{
sort:function(tableId,Idx){
var table = document.getElementById(tableId);
var tbody = table.tBodies[0];
var tr = tbody.rows;
var trValue = new Array();
for (var i=0; i<tr.length; i++ ) {
trValue[i] = tr[i]; //將表格中各行的信息存儲在新建的數(shù)組中
}
if (tbody.sortCol == Idx) {
trValue.reverse(); //如果該列已經(jīng)進行排序過了,則直接對其反序排列
} else {
trValue.sort(function(tr1, tr2){
var value1 = tr1.cells[Idx].innerText; //列
var value2 = tr2.cells[Idx].innerText; //第二列
value1 = value1.replace("%",""); //把有%的取消掉
value1=value1.trim(); //去空格
console.log(typeof(value1));
if(isNaN(value1)){
var index1 = value1.indexOf("分");
var index2 = value2.indexOf("分");
if(index1>0){
var num1 =value1.substring(0,index1);
var num2 =value1.substring(index1+1,value1.length-1);
var num3 =value2.substring(0,index2);
var num4 =value2.substring(index2+1,value2.length-1);
if(parseFloat(num1)>parseFloat(num3)){
return 1;
}
if(parseFloat(num1)<parseFloat(num3)){
return -1;
}
if(parseFloat(num1)==parseFloat(num3)){
return parseFloat(num2)-parseFloat(num4)
}
}else{
var a = tr1.cells[Idx].textContent;
var b= tr2.cells[Idx].textContent;
return a.localeCompare(b);
}
}else{
return parseFloat(value1)-parseFloat(value2);
}
});
}
var fragment = document.createDocumentFragment(); //新建一個代碼片段,用于保存排序后的結果
//var index = 0;
var arrtotal =new Array();
for (var i=0; i<trValue.length; i++ ) {
var c = trValue[i].cells[0].innerHTML;
//console.log(c);
if(c.trim().indexOf("匯總")!=-1){//匯總行總是排在表格最上面
// index = i;
arrtotal.push(i);
}else{
fragment.appendChild(trValue[i]);
}
}
if(arrtotal.length>0){
for(var k=arrtotal.length; k<0; k-- ){
tbody.appendChild(trValue[arrtotal[k]]);
}
}
//tbody.appendChild(trValue[index]);
tbody.appendChild(fragment); //將排序的結果替換掉之前的值
tbody.sortCol = Idx;
}
}
});
})(jQuery);
2.頁面函數(shù)
function desc_change(id,str){
$("#desc_1").html("日期");
$("#desc_2").html("ID");
$("#desc_3").html("類別");
$("#"+id).html(str);
}
function desc(id,str){
var htmlstr =$("#"+id).text().trim();
var c =str;
if(htmlstr==str){
c=str+'↓';
$("#"+id).html(c);
}else if(htmlstr==str+'↓'){
c=str+'↑'
$("#"+id).html(c);
}else if(htmlstr==str+'↑'){
c=str+'↓'
$("#"+id).html(c);
}
desc_change(id,c)
}
3.DOM結構
<table id="tableSort">
<thead>
<tr>
<th onclick="$.sortTable.sort('tableSort',0);desc('desc_1','日期')" ><a id="desc_1" >日期</a></th>
<th onclick="$.sortTable.sort('tableSort',1);desc('desc_2','軟件ID')" ><a id="desc_2" >ID</a></th>
<th onclick="$.sortTable.sort('tableSort',2);desc('desc_x','渠道ID')" ><a id="desc_3" >類別</a></th>
</tr>
</thead>
<tbody>
<tr>
<td>201870601</td>
<td>匯總</td>
<td>新聞</td>
</tr>
</tbody>
</table>
更多關于jQuery相關內(nèi)容感興趣的讀者可查看本站專題:《jQuery表格(table)操作技巧匯總》、《jQuery切換特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery常見經(jīng)典特效匯總》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
- jQuery表格排序組件-tablesorter使用示例
- 基于jquery的表格排序
- Jquery 選中表格一列并對表格排序實現(xiàn)原理
- jquery tablesorter.js 支持中文表格排序改進
- jQuery+Ajax實現(xiàn)表格數(shù)據(jù)不同列標題排序(為表格注入活力)
- jquery 表格排序、實時搜索表格內(nèi)容(附圖)
- 擴展jquery實現(xiàn)客戶端表格的分頁、排序功能代碼
- jquery實現(xiàn)表格本地排序的方法
- jquery.tableSort.js表格排序插件使用方法詳解
- 基于jQuery實現(xiàn)表格的排序
- jQuery增加和刪除表格項目及實現(xiàn)表格項目排序的方法
- jQuery html表格排序插件tablesorter使用方法詳解
相關文章
jQuery.ajax 跨域請求webapi設置headers的解決方案
需要通過服務器端設置響應頭、正確響應options請求,正確設置 JavaScript端需要設置的headers信息方能實現(xiàn),本文介紹的非常詳細,具有參考借鑒價值,需要的朋友可以參考下2016-08-08
完美解決jQuery符號$與其他javascript 庫、框架沖突的問題
下面小編就為大家?guī)硪黄昝澜鉀QjQuery符號$與其他javascript 庫、框架沖突的問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-08-08
一些主流JS框架中DOMReady事件的實現(xiàn)小結
在實際應用中,我們經(jīng)常會遇到這樣的場景,當頁面加載完成后去做一些事情:綁定事件、DOM操作某些結點等。2011-02-02
jQuery EasyUI 折疊面板accordion的使用實例(分享)
下面小編就為大家分享一篇jQuery EasyUI 折疊面板accordion的使用實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2017-12-12
jQuery根據(jù)用戶電腦是mac還是pc加載對應樣式的方法
這篇文章主要介紹了jQuery根據(jù)用戶電腦是mac還是pc加載對應樣式的方法,涉及jQuery針對客戶端信息的獲取及樣式的調(diào)用技巧,需要的朋友可以參考下2015-06-06
jQuery ajax 跨域插件jquery.xdomainrequest.min.js的使用方法
jQuery XDomainRequest 是一個利用 XDomainRequest 對象為 IE8、IE9 實現(xiàn)跨域資源共享(CORS - Cross Origin Resource Sharing)的 jQuery 插件2023-06-06

