1307人阅读
jquery（1）
JavaScript（9）
利用JQuery实现分页处理，首先你要了解为什么要分页。分页主要是为了避免一次性从数据库获取大量数据。其次才是为了展示效果。
关键点：第几页 ,每页条数&总行数
1、使用的包含文件
&link href=&css/Pager.css& rel=&stylesheet& type=&text/css& /&
&script src=&js/jquery.pager.js& type=&text/javascript&&&/script&
2、CSS文件内容
#pager ul.pages {
text-transform:
font-size:10
margin:10px 0 50
padding:0;
#pager ul.pages li {
list-style:
border:1px solid #
text-decoration:
margin:0 5px 0 0;
#pager ul.pages li:hover {
border:1px solid #003f7e;
#pager ul.pages li.pgEmpty {
border:1px solid #
#pager ul.pages li.pgCurrent {
border:1px solid #003f7e;
color:#000;
font-weight:700;
background-color:#
3、基础代码
&div class=&box01_content& style=&height:38&&
&div id=&pager& style=&float:&&&/div&
//每页显示数
var recordPerPage=100;
var recordSize='';//总条数未知的情况下，先查询总条数，在赋值
var jsonA数据源
     $(document).ready(function() {
//查询总条数，并赋值外部变量
get_record_size($(&#sdate_id&).val(),$(&#edate_id&).val(),$(&#province_id option:selected&).val(),actyname,$(&#marktcode_id&).val(),$(&#medianame_id&).val(),mic);
    $(&#pager&).pager({ pagenumber: 1, pagecount: (recordSize/recordPerPage+1), buttonClickCallback: PageClick });
//表示自定义点击分页数时的function方法，如：function(pageclickednumber){}
PageClick = function(pageclickednumber) {
      $(&#pager&).pager({ pagenumber: pageclickednumber, pagecount: (recordSize/recordPerPage+1), buttonClickCallback: PageClick });
     // $(&#result&).html(&Clicked Page & + pageclickednumber);
      init_page_new($(&#sdate_id&).val(),$(&#edate_id&).val(),$(&#province_id option:selected&).val(),$(&#acty_id&).val(),$(&#marktcode_id&).val(),$(&#medianame_id&).val(),'',pageclickednumber);
      makeTable(null,jsonAll);
//-------------------------------------------------------------------------------------------------------------------------------------------
//具体业务，查询数据后赋值给jsonA
function init_page_new(js_sdate,js_edate,js_province,js_actyname,js_marktcode,js_medianame,js_mic,page) {
    if (page == '')
    {
        page='1';
    }
    if (js_mic != '')
    {
        js_marktcode = js_
    }
    $.ajax({  
        url : &admonitor/actyAllInfoNew.do&,  
        async : false, // 注意此处需要同步，因为返回完数据后，下面才能让结果的第一条selected  
        type : &POST&,  
        data : {
            'sdate' :  js_sdate,
            'edate' :  js_edate,
            'province' : js_province,
            'actyname' : js_actyname,
            'marktcode' : js_marktcode,
            'medianame' : js_medianame,
            'page' : page,//第几页
            'recordPerPage' : recordPerPage//每页条数
        },
        dataType : &json&,  
        success : function(result, resultState) {
        //查询出结果取消页面不可编辑
        $(&#mb&).css(&display&,&none&);
        //关闭等待效果
        layer.closeAll();
        if (resultState == &success&) {
            var resultJson = eval(result);
            //数据拦截下来分页~
            jsonAll = resultJ
            if (resultJson != &&) {
                //$(&#detail_id&).html($(&#TemplatePutDetail_all&).tmpl(resultJson));
                //makeTable(null,resultJson)
            } else {
                $(&#detail_id&).html(&没有查询到数据&);
            }
        } else {
            alert(&出现错误，请重试!&);
        }
    } });
//-------------------------------------------------------------------------------------------------------------------------------------
//查询总条数，此方法参数应于你本身要查询的数据参数相同
function get_record_size(js_sdate,js_edate,js_province,js_actyname,js_marktcode,js_medianame,js_mic){
    $.ajax({  
        url : &admonitor/adManagerRecordSize.do&,  
        async : false, // 注意此处需要同步，因为返回完数据后，下面才能让结果的第一条selected  
        type : &POST&,  
        data : {
            'sdate' :  js_sdate,
            'edate' :  js_edate,
            'province' : js_province,
            'actyname' : js_actyname,
            'marktcode' : js_marktcode,
            'medianame' : js_medianame,
        },
        dataType : &json&,  
        success : function(result, resultState) {
    
        if (resultState == &success&) {
            //var resultJson = eval(result);
            recordSize =
            
        } else {
            alert(&出现错误，请重试!&);
        }
    } });
通过此方式post请求后会多增加两个参数(int)，即第几页，每页条数
* 营销活动-宽表导出营销活动全部信息（分页）
* @param _sdate 开始日期
* @param _edate 结束日期
* @param _province 省份
* @param _actyname 活动名称
* @param _marktcode 营销识别码
* @param _medianame 媒体名称
* @param _page 分页处理-第几页
* @param _recordPerPage 分页处理-每页条数
* @throws UnsupportedEncodingException
@RequestMapping(value = &/actyAllInfoNew.do&, method = RequestMethod.POST)
public @ResponseBody ArrayList&AdMonitorModel& actyAllInfoNew(
@RequestParam(value = &sdate&) String _sdate,
@RequestParam(value = &edate&) String _edate,
@RequestParam(value = &province&) String _province,
@RequestParam(value = &actyname&) String _actyname,
@RequestParam(value = &marktcode&) String _marktcode,
@RequestParam(value = &medianame&) String _medianame,
@RequestParam(value = &page&) String _page,
@RequestParam(value = &recordPerPage&) String _recordPerPage)
throws UnsupportedEncodingException {
String _timezone = &1&;
if(&&.equals(_sdate) && &&.equals(_edate))
_timezone = &0&;
ArrayList&AdMonitorModel& modellist =
Map&String, String& map = new HashMap&String, String&();
map.put(&_sdate&, _sdate);
map.put(&_edate&, _edate);
map.put(&_province&, _province);
map.put(&_actyname&, _actyname);
map.put(&_medianame&, _medianame);
map.put(&_marktcode&, _marktcode);
map.put(&_timezone&, _timezone);
map.put(&_start&, &&+((Integer.parseInt(_page)-1)*Integer.parseInt(_recordPerPage)));//计算从第几行开始查询数据
map.put(&_recordPerPage&, _recordPerPage);
modellist = adMonitorModelDao.findActyAllInfoListNew(map);
System.out.println(&营销活动--&宽表查询全部信息--&开始日期：& + _sdate + & 结束日期：&
+ _edate + & 省份：& + _province + &
活动名称：& + _actyname);
select * from t limit x offset y --在t表中从y行取，取x行数据
5、具体详解
javascript代码(JQuery Pager调用)分析
(1)$(&#pager&).pager({});部分
pagenumber，表示初始页数，如：1
pagecount，表示总页数，如：15
buttonClickCallback，表示点击分页数按钮调用的方法，如：PageClick
(2)PageClick = function(pageclickednumber) {}部分
PageClick，表示自定义点击分页数时的function方法，如：function(pageclickednumber){}
jQuery插件JQuery Pager分页器只需要起始页数pagenumber，最大页数pagecount，点击页数时的调用buttonClickCallback的function方法就可实现javascript分页功能，实际应用中只需对PageClick方法进行简单修改就可使用，如将pagenumber和pagecount设为变量，可通过GET的方法进行页数值传递，JQuery Pager就可实现javascript分页功能，其它可自行扩展，同时对jQuery插件JQuery Pager分页器buttonClickCallback方法实现
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：281747次
积分：3184
积分：3184
排名：第9004名
原创：103篇
转载：22篇
评论：44条
(2)(1)(1)(1)(2)(2)(4)(1)(1)(1)(1)(4)(2)(1)(1)(1)(3)(3)(2)(3)(5)(3)(1)(11)(1)(2)(6)(4)(3)(1)(2)(1)(4)(8)(8)(3)(15)(10)(2)一、关于DataGrid的分页和排序参数对于分页参数不需要用户指定，程序在AJAX请求的时候会带上分页和排序需要的参数每页显示条数：rows当前页：page排序字段：sort &【multiSort如果设置为true，则会发送多个排序字段，如：id,time，最新的在最后】排序类型：order 【multiSort如果设置为true，则会发送多个排序字段排序类型，如：asc,desc，最新的在最后】&二、关于DataGrid传递参数传递参数可以使用属性：queryParams形式：queryParams:{ "method": "LogInfoList", "LogName": $.trim($("#LogName").val()), "BeginTime": $.trim($("#BeginTime").val()), "EndTime": $.trim($("#EndTime").val()) }&三、实例代码&script language="javascript"&
$(function () {
ListData();
function ListData() {
$("#TableGrid").datagrid({
title: "用户信息表",
rownumbers: true,
singleSelect: false,
url: 'Handler.ashx',
method: 'get',
autoRowHeight: false,
pagination: true,
pageSize: 20,
pageList: [20, 30, 50, 80, 100],
multiSort: true,
nowrap: true,
fitColumns: true,
toolbar: toolbar,
frozenColumns: [[
{ field: 'ck', width: 80, checkbox: true },
{ field: 'Id', width: 80, hidden: true },
{ field: 'UserName', title: "登录名", width: 150, sortable: true },
{ field: 'RoleId', title: "所属角色", width: 100, sortable: true },
{ field: 'TrueName', title: "真实姓名", width: 100, sortable: true }
columns: [[
{ field: 'Telphone', title: "手机号码", width: 100, sortable: true },
{ field: 'Email', title: "Email", width: 150, sortable: true },
{ field: 'AddDate', title: "日期", width: 200, sortable: true }
onDblClickRow: onDblClickRow
var toolbar = [{
text: '添加',
iconCls: 'icon-add',
handler: function () {
OpenUrl('../AdminInfo/Operate.aspx?action=Add', '添加新用户', 600, 400);
text: '批量删除',
iconCls: 'icon-cut',
handler: function () {
var row = $("#TableGrid").datagrid('getSelected');
if (row) {
DelUrl('../AdminInfo/Del.aspx', row.Id);
function onDblClickRow(index) {
var row = $("#TableGrid").datagrid('getSelected');
if (row) {
OpenUrl('../AdminInfo/Operate.aspx?action=Edit&id=' + row.Id + '', '编辑用户信息', 600, 400);
&/script&View Code上面是与服务器端通讯的JS代码&table id="TableGrid"
width="95%"&
&/table&View Codehtml代码非常简单protected readonly int pageSize = string.IsNullOrEmpty(RequestString.GetRequestQueryString("rows")) ? 0 : Convert.ToInt32(RequestString.GetRequestQueryString("rows"));
protected readonly int pageIndex = string.IsNullOrEmpty(RequestString.GetRequestQueryString("page")) ? 0 : Convert.ToInt32(RequestString.GetRequestQueryString("page"));
protected readonly string fidSort = string.IsNullOrEmpty(RequestString.GetRequestQueryString("sort")) ? "Id" : RequestString.GetRequestQueryString("sort");
protected readonly bool sort = string.IsNullOrEmpty(RequestString.GetRequestQueryString("order")) ? true : RequestString.GetRequestQueryString("order") == "asc" ? false :
public void ProcessRequest(HttpContext context)
context.Response.AddHeader("Content-Type", "text/ charset=UTF-8");
int counts = 0;
DataTable dt = pageHelper.Page("AdminInfo", "Id,RoleId,UserName,TrueName,Telphone,Email,AddDate", pageSize, pageIndex, out counts, fidSort, sort, sqlWhere.ToString(), fidSort);
DataTableToJson(context, counts, dt);
public bool IsReusable
}View Codeashx服务器端处理代码&好了，完整的DataGrid表格插件使用到此结束
上传按钮&input type='f
最新教程周点击榜
微信扫一扫