JQ前台分页
对于你这种情况，最好选一个表格插件，JQ能用的第三方表格插件特别多，你想要的这些功能默认都已经支持，上手简单，且功能强大。
GridManager.js：
GridManager.js可快速的对table标签进行实例化，实例化后将实现以下功能:
宽度调整: 表格的列宽度可进行拖拽式调整
位置更换: 表格的列位置进行拖拽式调整
配置列: 可通过配置对列进行显示隐藏转换
表头吸顶: 在表存在可视区域的情况下,表头将一直存在于顶部
排序: 表格单项排序或组合排序
分页: 表格ajax分页,包含选择每页显示总条数和跳转至指定页功能
用户偏好记忆: 记住用户行为,含用户调整的列宽、列顺序、列可视状态及每页显示条数
序号: 自动生成序号列
全选: 自动生成全选列
导出: 当前页数据下载,和仅针对已选中的表格下载
右键菜单: 常用功能在菜单中可进行快捷操作
过滤: 通过对列进行过滤达到快速搜索效果
Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。
分页，即时搜索和排序
几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理
支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation
各式各样的扩展: Editor, TableTools, FixedColumns ……
丰富多样的option和强大的API
支持国际化
Bootstrap Table显示数据表格格式,提供了丰富的支持,单选框、复选框、排序、分页等。
更多插件可自行百度jquery table插件，类似的插件很多。
jquery表格FooTable插件怎么关闭列排序功能啊
这个可以参考如下内容:
JQuery.dataTables表格插件添加跳转到指定页
一、解决方案
1.添加自定义工具栏，嵌入文本框
[javascript] view plain copy
"dom": 'l"toolbar"frtip', //自定义工具栏
[javascript] view plain copy
//设置工具栏内容
//l - length changing input control
//f - filtering input
//t - The table!
//i - Table information summary
//p - pagination control
//r - processing display element
[javascript] view plain copy
$("div.toolbar").html(' b style="color:red"跳转第/binput id="searchNumber"/b style="color:red;"页/b');
2.监听文本框的change事件，执行插件的调转页面方法
[javascript] view plain copy
//调转到指定页面索引 ，注意大小写
var oTable = $('#example1').dataTable();
oTable.fnPageChange(page);
3.插件绘制成功后，绑定文本框的值
[javascript] view plain copy
//绘制的时候触发，绑定文本框的值
table.on('draw.dt', function (e, settings, data) {
var info = table.page.info();
//此处的page为0开始计算
console.info('Showing page: ' + info.page + ' of ' + info.pages);
$('#searchNumber').val(info.page + 1);
});
二、完整示例代码
[html] view plain copy
table id="example1" class="table table-hover table-striped"
thead
tr
th编号/th
th姓名/th
th性别/th
th生日/th
th班级/th
/tr
/thead
/table
[javascript] view plain copy
$(function () {
//注意方法名为DataTable
var table = $('#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);
//var page = $('#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(' b style="color:red"跳转第/binput id="searchNumber"/b style="color:red;"页/b');
//绑定分页事件----在切换分页的时候触发
//table.on('page.dt', function () {
// var info = table.page.info();
// console.info('Showing page: ' + info.page + ' of ' + info.pages);
//});
//绘制的时候触发，绑定文本框的值
table.on('draw.dt', function (e, settings, data) {
var info = table.page.info();
//此处的page为0开始计算
console.info('Showing page: ' + info.page + ' of ' + info.pages);
$('#searchNumber').val(info.page + 1);
});
//监听文本框更改
$('#searchNumber').change(function () {
var page = $(this).val();
page = parseInt(page) || 1;
page = page - 1;
//调转到指定页面索引 ，注意大小写
var oTable = $('#example1').dataTable();
oTable.fnPageChange(page);
});
});
如何快速入门jQuery Flexigrid 表格插件
Flexigrid是一个类似于Ext Gird，但基于jQuery开发的Grid。它具有的功能包括：可以调整列宽，合并列标题，分页，排序，显示/隐藏表格等。Flexigrid显示的数据能够通过Ajax获取或者从一个普通的表格转换。 本文重点介绍如何入门使用
jquery插件无刷新分页paginnation中如何加上按条件排序数据？
1.使用插件为 jquery.pagination.js 。
首先引用 jquery.pagination.js （分页js），跟pagination.css（分页样式css）。
2.页面js代码为
复制代码代码如下:
script type="text/javascript"
var pageIndex = 0; //页面索引初始值
var pageSize = 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, //当前页索引
});
//翻页调用
function PageCallback(index, jq) {
InitTable(index);
}
//请求数据
function InitTable(pageIndex) {
$.ajax({
type: "POST",
dataType: "text",
url: '', //提交到一般处理程序请求数据
data: "pageIndex=" + (pageIndex) + "pageSize=" + pageSize, //提交两个参数：pageIndex(页面索引)，pageSize(显示条数)
success: function(data) {
$("#Result tr:gt(0)").remove(); //移除Id为Result的表格里的行，从第二行开始（这里根据页面布局不同页变）
$("#Result").append(data); //将返回的数据追加到表格
}
});
}
});
/script
3.页面body里面的代码为
复制代码代码如下:
table width="100%" border="0" cellspacing="0" cellpadding="0"
tr
td width="60" align="right"商品名：/td
td width="200" align="left"input type="text" id="txtKeywords" class="keyword" //td
td width="200" align="left"input id="search" type="button" value=" 查 找 " class="submit" //td
td /td
/tr
/table
table id="Result" cellspacing="0" cellpadding="0"
tr
th商品编号/th
th商品名称/th
/tr
/table
div id="Pagination" class="right flickr"/div
4.页面后台代码为
复制代码代码如下:
protected int pcount = 0; //总条数
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
BLL.TbGoods bll = new BLL.TbGoods();
pcount = bll.GetRecordCount("Status='" + (int)Enum.RecordStatus.Normal + "'"); //获取页面总条数，即要现实的数据总条数，还不明白的话，就是select count（*）from Table ，就是这里的个数。
}
}
5.一般处理程序fffff.ashx代码为
复制代码代码如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Text;
using System.Data;
namespace EShop.Web.Admin.tool.Reserver
{
/// summary
/// ListBuyBatchManage 的摘要说明
/// /summary
public class ListBuyBatchManage : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
String str = string.Empty;
if (context.Request["pageIndex"] != null context.Request["pageIndex"].ToString().Length 0)
{
int pageIndex; //具体的页面数
int.TryParse(context.Request["pageIndex"], out pageIndex);
if(context.Request["pageSize"]!=nullcontext.Request["pageSize"].ToString().Length 0)
{
//页面显示条数
int size = Convert.ToInt32(context.Request["pageSize"]);
string data= BindSource(size,pageIndex);
context.Response.Write(data);
context.Response.End();
}
}
}
#region 无刷新分页
public string BindSource(int pagesize,int page)
{
BLL.TbGoods bll=new BLL.TbGoods();
DataSet ds = bll.GetListByPage("Status='" + (int)Enum.RecordStatus.Normal + "'", "", pagesize * page + 1, pagesize * (page + 1)); //获取数据源的ds会吧。
StringBuilder sb = new StringBuilder();
if (ds!=null)
{
foreach (DataRow row in ds.Tables[0].Rows)
{
sb.Append("trtd");
sb.Append(row["GoodsUid"]);
sb.Append("/tdtd");
sb.Append(row["GoodsName"]);
sb.Append("/td/tr");
}
}
return sb.ToString();
}
#endregion
public bool IsReusable
{
get
{
return false;
}
}
}
}
用jquery实现表格列排序？
$(document).ready(function()
{
//插件的形式
jQuery.fn.alterRowColors = function()
{
$('tbody tr:odd', this).removeClass('even').addClass('odd');
$('tbody tr:even', this).removeClass('odd').addClass('even');
return this;
}
//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 )
{
//处理三种有可能存在的排序字段，比较方法
var findSortKey;
if( $(this).is('.sort-title') || $(this).is('.sort-author') )
{
findSortKey = function( $cell )
{
return $cell.find('.sort-title').text().toUpperCase()+ '' +$cell.text().toUpperCase();
}
}
else if( $(this).is('.sort-date') )
{
findSortKey = function( $cell )
{
return Date.parse('1' + $cell.text());
}
}
else if( $(this).is('.sort-price') )
{
findSortKey = function( $cell )
{
var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''))
return isNaN(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;
var rows = $table.find('tbody tr').get();
$.each( rows, function( index, row )
{
row.sortKey = findSortKey($(row).children('td').eq(column));
});
//排序方法
rows.sort(function( a, b )
{
if( $sortOrder == 1 )
{
//升序
if(a.sortKey b.sortKey) return -1;
if(a.sortKey b.sortKey) return 1;
return 0;
}
else
{
//降序
if(a.sortKey b.sortKey) return 1;
if(a.sortKey b.sortKey) return -1;
return 0;
}
});
//排序后的对象添加给$table
$.each( rows, function( index, row )
{
$table.children('tbody').append(row);
row.sortKey = null;
});
//显著标明是通过某一列排序的
$table.find('td').removeClass('sorted')
.filter(':nth-child('+ (column + 1) +')').addClass('sorted');
//重新赋予奇偶行的样式
$table.alterRowColors();
});
}
});
//分页效果
var currentPage = 0; //当前页
var pageSize = 10; //每页行数（不包括表头）
//绑定分页事件
$table.bind('repaginate', function()
{
$table.find('tbody tr').hide()
.slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();
});
var numRows = $table.find('tbody tr').length; //记录宗条数
var numPages = Math.ceil(numRows/pageSize); //总页数
var $pager = $('div class="page"/div'); //分页div
for( var page = 0; page numPages; page++ )
{
//为分页标签加上链接
$('a href="#" span'+ (page+1) +'/span/a')
.bind("click", { "newPage": page }, function(event)
{
currentPage = event.data["newPage"];
$table.trigger("repaginate");
})
.appendTo($pager);
$pager.append(" ");
}
$pager.insertAfter($table); //分页div插入table
$table.trigger("repaginate"); //初始化
});
jquery表格排序插件为什么对时间无效
你是用什么插件，可能没这功能
一般排序时间是要先将时间转化成时间戳的形式才能比较大小的，比较麻烦，作者估计是懒得写了