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 ...

随机推荐

谈谈UI架构设计的演化
谈谈UI架构设计的演化经典MVC 在1979年,经典MVC模式被提出. 在当时,人们一直试图将纯粹描述思维中的对象与跟计算机环境打交道的代码隔离开来,而Trygve Reenskaug在跟一些人的讨 ...
[公告][重要]Senparc.Weixin v4.9.0 & Senparc.Weixin.MP v14.3.104更新说明
本次升级除了更新了发红包接口等接口之外,最重要的是重构了缓存模块. 如何升级? 之前的缓存是为Container设计的,原先的ContainerCacheStrategy继承自BaseCacheStr ...
解决微信公众号OAuth出现40029(invalid code，不合法的oauth_code)的错误
关于OAuth 官方教程:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842&token=&la ...
OpenGL学习进程（13）第十课：基本图形的底层实现及算法原理
本节介绍OpenGL中绘制直线.圆.椭圆,多边形的算法原理. (1)绘制任意方向(任意斜率)的直线: 1)中点画线法: 中点画线法的算法原理不做介绍,但这里用到最基本的画0<=k ...
c#属性中的get和set属性
get是给属性赋值,set是取属性的值. get.set用法: 一是隐藏组件或类内部的真是成员: 二是用来建立约束的,比如,实现“有我没你”这种约束: 三是用来响应属性变化事件,当属性变化是做某事,只 ...
IOS数据存储之NSUserDefaults
前言: 作为从事Android开发人来说一定听说过SharedPreferences,然后要成为一名ios开发工程师来说咋能不知道NSUserDefaults!接下来让我们认识一下. NSUserDe ...
Util应用程序框架公共操作类（一）:数据类型转换公共操作类（介绍篇）
本系列文章将介绍一些对初学者有帮助的辅助类,这些辅助类本身并没有什么稀奇之处,如何能发现需要封装它们可能更加重要,所谓授之以鱼不如授之以渔,掌握封装公共操作类的技巧才是关键,我会详细说明创建这些类的动 ...
关于SubSonic3.0插件使用SqlQuery或Select查询时产生的System.NullReferenceException异常修复
早上在编写执行用例时,突然爆异常System.NullReferenceException: 未将对象引用设置到对象的实例执行代码:
安装最新版本的PHPUnit后，不能使用
我使用的是widows系统.本来3.7.8版本的Phpunit用的是非常顺畅的,最近重新安装phpunit,安装了最小版本,然后在使用的时候就会报很多各种错误.无奈之下只能降版本到3.7.8 首先要卸 ...
Android 数据库框架OrmLite的使用（一）
在这里记录下最基本的用法,官网上可了解相关的介绍. 1.下载OrmLite jar 在下载android的:ormlite-android-4.48.jar和ormlite-core-4.48.jar ...

bootstrap分页

bootstrap分页的更多相关文章

随机推荐

热门专题