jquery表格排序插件？
2024-10-16 08:29:00
对于你这种情况，最好选一个表格插件，JQ能用的第三方表格插件特别多，你想要的这些功能默认都已经支持，上手简单，且功能强大。
GridManager.js：
GridManager.js可快速的对table标签进行实例化，实例化后将实现以下功能:
宽度调整:表格的列宽度可进行拖拽式调整
位置更换:表格的列位置进行拖拽式调整
配置列:可通过配置对列进行显示隐藏转换
表头吸顶:在表存在可视区域的情况下,表头将一直存在于顶部
排序:表格单项排序或组合排序
分页:表格ajax分页,包含选择每页显示总条数和跳转至指定页功能
用户偏好记忆:记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数
序号:自动生成序号列
全选:自动生成全选列
导出:当前页数据下载,和仅针对已选中的表格下载
右键菜单:常用功能在菜单中可进行快捷操作
过滤:通过对列进行过滤达到快速搜索效果
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
分页，即时搜索和排序
几乎支持任何数据源：DOM，javascript，Ajax和服务器处理
支持不同主题DataTables,jQueryUI,Bootstrap,Foundation
各式各样的扩展:Editor,TableTools,FixedColumns……
丰富多样的option和强大的API
支持国际化
BootstrapTable显示数据表格格式,提供了丰富的支持,单选框、复选框、排序、分页等。
更多插件可自行百度jquerytable插件，类似的插件很多。
jquery表格FooTable插件怎么关闭列排序功能啊这个可以参考如下内容:
JQuery.dataTables表格插件添加跳转到指定页
一、解决方案
1.添加自定义工具栏，嵌入文本框
[javascript]viewplaincopy
"dom":'l"toolbar"frtip',//自定义工具栏
[javascript]viewplaincopy
//设置工具栏内容
//l-lengthchanginginputcontrol
//f-filteringinput
//t-Thetable!
//i-Tableinformationsummary
//p-paginationcontrol
//r-processingdisplayelement
[javascript]viewplaincopy
$("div.toolbar").html('bstyle="color:red"跳转第/binputid="searchNumber"/bstyle="color:red;"页/b');
2.监听文本框的change事件，执行插件的调转页面方法
[javascript]viewplaincopy
//调转到指定页面索引，注意大小写
varoTable=$('#example1').dataTable();
oTable.fnPageChange(page);
3.插件绘制成功后，绑定文本框的值
[javascript]viewplaincopy
//绘制的时候触发，绑定文本框的值
table.on('draw.dt',function(e,settings,data){
varinfo=table.page.info();
//此处的page为0开始计算
console.info('Showingpage:'+info.page+'of'+info.pages);
$('#searchNumber').val(info.page+1);
});
二、完整示例代码
[html]viewplaincopy
tableid="example1"class="tabletable-hovertable-striped"
thead
tr
th编号/th
th姓名/th
th性别/th
th生日/th
th班级/th
/tr
/thead
/table
[javascript]viewplaincopy
$(function(){
//注意方法名为DataTable
vartable=$('#example1').DataTable({
"dom":'l"toolbar"frtip',//自定义工具栏
"pagingType":"full_numbers",
lengthMenu:[3,5,10],
processing:true,//是否使用进度条
serverSide:true,//是否启用数据库加载
ajax:{
url:'/tableone/getlist',
type:'post',
data:function(d){
d.name='张三';
/*
*自定义aja参数
*特别说明，此处可以重写控件的默认参数，比如分页参数
*/
//d.start=0;
//console.info(d);
//varpage=$('#searchNumber').val();
//page=parseInt(page)||1;
//d.start=(page-1)*d.length;
}
},
//指定列绑定的字段
columns:[
{data:'sno'},
{data:'sname'},
{data:'ssex'},
{data:'sbirthday'},
{data:'class'}
],
order:[
[3,'desc']
]
});
$("div.toolbar").html('bstyle="color:red"跳转第/binputid="searchNumber"/bstyle="color:red;"页/b');
//绑定分页事件----在切换分页的时候触发
//table.on('page.dt',function(){
//varinfo=table.page.info();
//console.info('Showingpage:'+info.page+'of'+info.pages);
//});
//绘制的时候触发，绑定文本框的值
table.on('draw.dt',function(e,settings,data){
varinfo=table.page.info();
//此处的page为0开始计算
console.info('Showingpage:'+info.page+'of'+info.pages);
$('#searchNumber').val(info.page+1);
});
//监听文本框更改
$('#searchNumber').change(function(){
varpage=$(this).val();
page=parseInt(page)||1;
page=page-1;
//调转到指定页面索引，注意大小写
varoTable=$('#example1').dataTable();
oTable.fnPageChange(page);
});
});
如何快速入门jQueryFlexigrid表格插件
Flexigrid是一个类似于ExtGird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。本文重点介绍如何入门使用
jquery插件无刷新分页paginnation中如何加上按条件排序数据？1.使用插件为jquery.pagination.js。
首先引用jquery.pagination.js（分页js），跟pagination.css（分页样式css）。
2.页面js代码为
复制代码代码如下:
scripttype="text/javascript"
varpageIndex=0;//页面索引初始值
varpageSize=15;//每页显示条数初始化，修改显示条数，修改这里即可
$(function(){
InitTable(0);//Load事件，初始化表格数据，页面索引为0（第一页）
//分页，PageCount是总条目数，这是必选参数，其它参数都是可选
$("#Pagination").pagination(%=pcount%,{
callback:PageCallback,//PageCallback()为翻页调用次函数。
prev_text:"?上一页",
next_text:"下一页?",
items_per_page:pageSize,
num_edge_entries:2,//两侧首尾分页条目数
num_display_entries:6,//连续分页主体部分分页条目数
current_page:pageIndex,//当前页索引
});
//翻页调用
functionPageCallback(index,jq){
InitTable(index);
}
//请求数据
functionInitTable(pageIndex){
$.ajax({
type:"POST",
dataType:"text",
url:'',//提交到一般处理程序请求数据
data:"pageIndex="+(pageIndex)+"pageSize="+pageSize,//提交两个参数：pageIndex(页面索引)，pageSize(显示条数)
success:function(data){
$("#Resulttr:gt(0)").remove();//移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）
$("#Result").append(data);//将返回的数据追加到表格
}
});
}
});
/script
3.页面body里面的代码为
复制代码代码如下:
tablewidth="100%"border="0"cellspacing="0"cellpadding="0"
tr
tdwidth="60"align="right"商品名：/td
tdwidth="200"align="left"inputtype="text"id="txtKeywords"class="keyword"//td
tdwidth="200"align="left"inputid="search"type="button"value="查找"class="submit"//td
td/td
/tr
/table
tableid="Result"cellspacing="0"cellpadding="0"
tr
th商品编号/th
th商品名称/th
/tr
/table
divid="Pagination"class="rightflickr"/div
4.页面后台代码为
复制代码代码如下:
protectedintpcount=0;//总条数
protectedvoidPage_Load(objectsender,EventArgse)
{
if(!IsPostBack)
{
BLL.TbGoodsbll=newBLL.TbGoods();
pcount=bll.GetRecordCount("Status='"+(int)Enum.RecordStatus.Normal+"'");//获取页面总条数，即要现实的数据总条数，还不明白的话，就是selectcount（*）fromTable，就是这里的个数。
}
}
5.一般处理程序fffff.ashx代码为
复制代码代码如下:
usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Web;
usingSystem.Text;
usingSystem.Data;
namespaceEShop.Web.Admin.tool.Reserver
{
///summary
///ListBuyBatchManage的摘要说明
////summary
publicclassListBuyBatchManage:IHttpHandler
{
publicvoidProcessRequest(HttpContextcontext)
{
context.Response.ContentType="text/plain";
Stringstr=string.Empty;
if(context.Request["pageIndex"]!=nullcontext.Request["pageIndex"].ToString().Length0)
{
intpageIndex;//具体的页面数
int.TryParse(context.Request["pageIndex"],outpageIndex);
if(context.Request["pageSize"]!=nullcontext.Request["pageSize"].ToString().Length0)
{
//页面显示条数
intsize=Convert.ToInt32(context.Request["pageSize"]);
stringdata=BindSource(size,pageIndex);
context.Response.Write(data);
context.Response.End();
}
}
}
#region无刷新分页
publicstringBindSource(intpagesize,intpage)
{
BLL.TbGoodsbll=newBLL.TbGoods();
DataSetds=bll.GetListByPage("Status='"+(int)Enum.RecordStatus.Normal+"'","",pagesize*page+1,pagesize*(page+1));//获取数据源的ds会吧。
StringBuildersb=newStringBuilder();
if(ds!=null)
{
foreach(DataRowrowinds.Tables[0].Rows)
{
sb.Append("trtd");
sb.Append(row["GoodsUid"]);
sb.Append("/tdtd");
sb.Append(row["GoodsName"]);
sb.Append("/td/tr");
}
}
returnsb.ToString();
}
#endregion
publicboolIsReusable
{
get
{
returnfalse;
}
}
}
}
用jquery实现表格列排序？$(document).ready(function()
{
//插件的形式
jQuery.fn.alterRowColors=function()
{
$('tbodytr:odd',this).removeClass('even').addClass('odd');
$('tbodytr:even',this).removeClass('odd').addClass('even');
returnthis;
}
//1.此时的函数是作为jQuery.fn的一个新属性定义的，不是孤立的函数，这样就把该函数注册成了一个插件，
//2.使用关键字this，在一个插件内部，this表示的是调用该插件的jQuery对象，
//3.最后在函数的末尾返回this,返回这个值可以使这个新方法能够继续连缀其他的方法。
var$sortOrder=0;//排序类型1表示升序，0表示降序
var$table=$('table#shop');
$table.alterRowColors();
$('th',$table).each(function(column)
{
//处理三种有可能存在的排序字段，比较方法
varfindSortKey;
if($(this).is('.sort-title')||$(this).is('.sort-author'))
{
findSortKey=function($cell)
{
return$cell.find('.sort-title').text().toUpperCase()+''+$cell.text().toUpperCase();
}
}
elseif($(this).is('.sort-date'))
{
findSortKey=function($cell)
{
returnDate.parse('1'+$cell.text());
}
}
elseif($(this).is('.sort-price'))
{
findSortKey=function($cell)
{
varkey=parseFloat($cell.text().replace(/^[^\d.]*/,''))
returnisNaN(key)?0:key;
}
}
//排序
if(findSortKey)
{
$(this).addClass('clickable').hover(function()
{
$(this).addClass('hover');
var$title=$sortOrder==0?'升序':'降序';
$(this).attr('title','按'+$(this).html()+$title+'排列');
},function()
{
$(this).removeClass('hover');
}).click(function()
{
$sortOrder=$sortOrder==0?1:0;
varrows=$table.find('tbodytr').get();
$.each(rows,function(index,row)
{
row.sortKey=findSortKey($(row).children('td').eq(column));
});
//排序方法
rows.sort(function(a,b)
{
if($sortOrder==1)
{
//升序
if(a.sortKeyb.sortKey)return-1;
if(a.sortKeyb.sortKey)return1;
return0;
}
else
{
//降序
if(a.sortKeyb.sortKey)return1;
if(a.sortKeyb.sortKey)return-1;
return0;
}
});
//排序后的对象添加给$table
$.each(rows,function(index,row)
{
$table.children('tbody').append(row);
row.sortKey=null;
});
//显著标明是通过某一列排序的
$table.find('td').removeClass('sorted')
.filter(':nth-child('+(column
热门标签
