bootstrap分页

使用bootstrap分页插件，如下代码是html代码

</head>
<body>
<div id="list">
<table id="data_table" class="table table-striped">
<thead>
<tr>
<th>编号</th><th>标题</th><th>用户</th>
</thead>
<tbody id="tbody">

</tbody>
</table>
</div>
<div><ul id='bp-3-element-test' style="cursor:hand;"></ul></div>
<script>
$(function () {
var str = "";
var carId = 1;
$.ajax({
url: "page.ashx",
data:{id:carId},
dataType: 'json',
type: 'post',
success: function (data) {
if (data != null) {
for (var i = 0; i < data.dt.length; i++) {
str += "<tr><td>" + data.dt[i]["New_Id"] + "</td><td>" + data.dt[i]["New_Title"] + "</td><td>" + data.dt[i]["New_UserId"] + "</td></tr>";
}
var pageCount = data.pageCount; //取到pageCount的值(把返回数据转成object类型)
var currentPage = data.CurrentPage; //得到urrentPage
var element = $("#bp-3-element-test");
var options = {
bootstrapMajorVersion: 3,
currentPage: currentPage,
totalPages: pageCount,
numberOfPages: 5,
itemTexts: function (type, page, current) {
switch (type) {
case "first":
return "首页";
case "prev":
return "上一页";
case "next":
return "下一页";
case "last":
return "末页";
case "page":
return page;
}
}, onPageClicked: function (event, originalEvent, type, page) {
var str1 = "";
$("#tbody").html("");
$.ajax({
url: "page.ashx",
data: { id: page },
type: 'post',
success: function (data1) {
//console.log(data1);
if (data1 != null) {
var jsonobj = eval('(' + data1 + ')'); //将json字符串转换成json数组
console.log(jsonobj.dt[0]["New_Id"]);
for (var i = 0; i < jsonobj.dt.length; i++) {
str1 += "<tr><td>" + jsonobj.dt[i]["New_Id"] + "</td><td>" + jsonobj.dt[i]["New_Title"] + "</td><td>" + jsonobj.dt[i]["New_UserId"] + "</td></tr>";
}
console.log(str1);
$("#tbody").html(str1);
}
}
})

}
}
element.bootstrapPaginator(options);
}

$("#tbody").html(str);
}
})

})

</script>
</body>

一般处理程序

context.Response.ContentType = "text/plain";
int id =Convert.ToInt32(context.Request["id"]);
const int pageSize = 5;
string sql = "select count(*) from news";
int rowCount =(int)SQLHelper.ExecuteSclar(sql);
if (rowCount % pageSize != 0)
{
rowCount = rowCount / pageSize + 1;
}
else
{
rowCount = rowCount / pageSize;
}
DataTable dt = GetListByPageByWhere("news", "*", "new_id", "", pageSize, id, rowCount);
var strResult = "{\"pageCount\":" + rowCount + ",\"CurrentPage\":" + id + ",\"dt\":" + JsonConvert.SerializeObject(dt) + "}";
context.Response.Write(strResult);
return;

}

private static DataTable GetListByPageByWhere(string tabname, string ReFieldsStr, string order, string strWhere, int PageSize, int PageIndex, int TotalRecord)
{

SqlParameter[] parameters = new SqlParameter[]{
new SqlParameter{ ParameterName="@TableName" ,SqlDbType=SqlDbType.VarChar,Value=tabname},
new SqlParameter{ParameterName="@ReFieldsStr",SqlDbType=SqlDbType.VarChar,Value=ReFieldsStr},
new SqlParameter{ParameterName="@OrderString",SqlDbType=SqlDbType.VarChar,Value=order},
new SqlParameter{ParameterName="@WhereString", SqlDbType=SqlDbType.VarChar, Value=strWhere},
new SqlParameter{ ParameterName="@PageSize", SqlDbType=SqlDbType.Int,Value=PageSize},
new SqlParameter{ParameterName="@PageIndex", SqlDbType=SqlDbType.Int,Value=PageIndex},
new SqlParameter{ParameterName="@TotalRecord",SqlDbType= SqlDbType.Int,Value=TotalRecord},
};
return SQLHelper.ExecuteDataTable("PROCE_PAGECHANGE", CommandType.StoredProcedure, parameters);

数据库的分页存储过程

USE [ActivaOnlineSupport]

GO

/****** Object:  StoredProcedure [dbo].[PROCE_PAGECHANGE]    Script Date: 08/13/2014 13:45:17 ******/

SET ANSI_NULLS ON

GO

SET QUOTED_IDENTIFIER ON

GO

ALTER PROCEDURE [dbo].[PROCE_PAGECHANGE]

(

 @TableName varchar(50),            --表名

 @ReFieldsStr varchar(200) = '*',   --字段名(全部字段为*)

 @OrderString varchar(200),         --排序字段(必须!支持多字段不用加order by)

 @WhereString varchar(500) =N'',  --条件语句(不用加where)

 @PageSize int,                     --每页多少条记录

 @PageIndex int = 1 ,               --指定当前为第几页

 @TotalRecord int output            --返回总记录数

)

AS

BEGIN    

    --处理开始点和结束点

    Declare @StartRecord int;

    Declare @EndRecord int;

    Declare @TotalCountSql nvarchar(500);

    Declare @SqlString nvarchar(2000);

    set @StartRecord = (@PageIndex-1)*@PageSize + 1

    set @EndRecord = @StartRecord + @PageSize - 1

    SET @TotalCountSql= N'select @TotalRecord = count(*) from ' + @TableName;--总记录数语句

    SET @SqlString = N'(select row_number() over (order by '+ @OrderString +') as rowId,'+@ReFieldsStr+' from '+ @TableName;--查询语句

    --

    IF (@WhereString! = '' or @WhereString!=null)

        BEGIN

            SET @TotalCountSql=@TotalCountSql + '  where '+ @WhereString;

            SET @SqlString =@SqlString+ '  where '+ @WhereString;

        END

    --第一次执行得到

    --IF(@TotalRecord is null)

    --   BEGIN

           EXEC sp_executesql @totalCountSql,N'@TotalRecord int out',@TotalRecord output;--返回总记录数

    --  END

    ----执行主语句

    set @SqlString ='select * from ' + @SqlString + ') as t where rowId between ' + ltrim(str(@StartRecord)) + ' and ' +  ltrim(str(@EndRecord));

    Exec(@SqlString)

END

bootstrap分页的更多相关文章

bootstrap 分页
1.背景: 前端页面使用bootstrap分页,同时与搜索条件联动: 2. jsp页面由服务端返回后, 异步请求动态创建表格, 分页的数据由服务端第一次返回后初始化, 以后每次异步请求再更新. jsp ...
bootstrap 分页样式代码
bootstrap 分页样式代码,废话不多说,直接上源码 <!DOCTYPE html> <html> <head> <title>Bootstrap ...
Bootstrap 分页插件 ajax获取数据显示
Bootstrap 分页插件 ajax获取数据显示标签(空格分隔): bootstrap 文章的内容是使用bootstrap-paginator进行分页,使用ajax获取后台数据.渲染. 1. 版本 ...
bootstrap分页插件的使用
项目中需要实现文章列表的分页显示,由于使用了bootstrap框架,所以我们选择bootstrap的分页实现方法.网上有一些这方面的介绍文章,并且也有相关的示例程序.这里结合我们的项目,介绍一下使用b ...
Bootstrap分页插件ajax返回数据，工具类的编写
使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别需要引入的css:  <link href=&q ...
yii使用bootstrap分页样式
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包.它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架.Bootstra ...
bootstrap 分页表格插件
找了两个table的插件,一个是bootstrap table ,另一个是bootstrap-paginator 这里只介绍 bootstrap table 插件使用及简单案例文档介绍:http: ...
Bootstrap分页插件--Bootstrap Paginator
开源中国有一篇介绍的很详细,链接:https://my.oschina.net/shunshun/blog/204587 使用这个插件和使用其他Bootstrap内置的插件一样,需要引入如下文件: & ...
bootstrap分页插件--Bootstrap Paginator的使用&AJAX版备份(可单独使用)
html部分: <ul class="pagination"></ul>  <div cl ...

随机推荐

AngularJs项目文件以及文件夹结构
app/ ----- Libs/ // references for all libs ---------- angular.js ---------- angular-route.js ----- ...
Node.js开发者最常范的10个错误
目录前言 1 不使用开发工具 1.1 自动重启工具 1.2 浏览器自动刷新工具 2 阻塞event loop 3 频繁调用回调函数 4 圣诞树结构的回调(回调的地狱) 5 创建一个大而完整的应用程序 ...
Atitit 软件开发中瓦哈比派的核心含义以及修行方法以及对我们生活与工作中的指导意义
Atitit 软件开发中瓦哈比派的核心含义以及修行方法以及对我们生活与工作中的指导意义首先我们指明,任何一种行动以及教派修行方法都有他的多元化,只看到某一方面,就不能很好的评估利弊,适不适合自己使 ...
PHP SESSION机制,从存储到读取
PHP中,如果要获取SESSION数据,必须要有对应的session_id,session_id的获取方式有两种 1.基于客户端的cookie 2.基于url 先说第一种情况,基于客户端的cookie ...
C#设计模式系列：职责链模式（Chain of Responsibility）
1.职责链模式简介 1.1>.定义职责链模式是一种行为模式,为解除请求的发送者和接收者之间的耦合,而使多个对象都有机会处理这个请求.将这些对象连接成一条链,并沿着这条链传递该请求,直到有一个对 ...
Android 圆形头像自己动手
圆形头像DIY 现在大部分app使用的都是圆形头像,网上开源的也很多,但是有没有考虑过DIY圆形头像呢?下面就自己实现一个,先看下demo展示第一步:原理解释(图片很丑,原理很真) 1.画外框圆形, ...
Use Qt in Debian for OpenCASCADE
Use Qt in Debian for OpenCASCADE eryar@163.com Recently several OpenCASCADE enthusiasts want to buil ...
C#中的readonly与const的比较
C#中有两种常量类型,分别为readonly(运行时常量)与const(编译时常量),本文将就这两种类型的不同特性进行比较并说明各自的适用场景.工作原理 readonly为运行时常量,程序运行时进行赋 ...
MVC4做网站六后台管理:6.1.4管理员列表、添加及删除
一.管理员列表 1.首先[AdministratorController]中添加返回分部视图的public PartialViewResult Index() /// <summary> ...
Android NDK开发初识
神秘的Android NDK开发往往众多程序员感到兴奋,但又不知它为何物,由于近期开发应用时,为了是开发的.apk文件不被他人解读(反编译),查阅了很多资料,其中有提到使用NDK开发,怀着好奇的心理, ...

bootstrap分页

bootstrap分页的更多相关文章

随机推荐

热门专题