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

随机推荐

Linux学习之Exam系统发布
配置时间:2015年11月27日配置人:撰写人:微冷的雨 Happy 01.Linux安装图欢迎页面桌面 02.Linux命令之文件目录操作给北大青鸟五道口校区创建三个机房(L4,L5,L ...
Pycharm5注册方式
0x1 ,安装 0x2 , 调整时间到2038年. 0x3 ,申请30天试用 0x4, 退出pycharm 0x5, 时间调整回来. ##注册方法2### 注册方法: 在注册时选择 Licen ...
Git命令汇总
1. 工作区和版本库说明: 工作区(Working Directory)就是创建仓库的文件夹版本库(Repository)就是工作区的隐藏目录.git,版本库中有暂存区(stage/index)和 ...
Android开发学习之路-二维码学习
这个月装逼有点少了,为什么呢,因为去考软件射鸡师了,快到儿童节了,赶紧写篇博纪念一下逝去的青春,唔,请忽略这句话. 二维码其实有很多种,但是我们常见的微信使用的是一种叫做QRCode的二维码,像下面这 ...
SQL 中 EXISTS 与 NOT EXISTS
带有 EXISTS 操作符的子查询不返回任何数据,只产生逻辑真值 'true' 或逻辑假值 'false'.带有 EXISTS 操作符的子查询都是相关子查询. 相关子查询:子查询的条件依赖父查询. E ...
datagrid界面，链接数据库读取数据
1.学生列表的 HTML部分 <script type="text/javascript"> $(function(){ //创建dataGrid $("#d ...
自定义函数执行动态sql语句
--函数中不能调用动态SQL,使用用存储过程吧.如果还要对函数做其他操作,换成存储过程不方便,可以考虑把其他操作一起封装在存储过程里面.如: create proc [dbo].[FUN_YSCL ...
List-style-type属性失效
异常处理汇总-前端系列:http://www.cnblogs.com/dunitian/p/4523015.html 看重点: 根本原因:padding: 0 0 0 0px; 解决:list-sty ...
ArcGIS API for JavaScript（2）-ArcGIS Server发布要素图层服务
1.前言上一篇该系列的文章我们主要讲了一下基础Web地图搭建,这篇我们主要讲一下ArcGIS Server发布服务,并且如何调用服务.将自己的数据加载到Web地图当中来,实现Web端浏览数据. 2. ...
iOS开发之WebView
做iOS的应用也有一段时间了,在之前的demo中一直没有机会用到WebView,今天就查缺补漏一下,使用一下WebView.最早接触WebView是在Android中接触的,iOS中的WebView的 ...

bootstrap分页

bootstrap分页的更多相关文章

随机推荐

热门专题