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

随机推荐

sqlalchemy(二)高级用法
sqlalchemy(二)高级用法本文将介绍sqlalchemy的高级用法. 外键以及relationship 首先创建数据库,在这里一个user对应多个address,因此需要在address上增 ...
crossplatfrom---electron入门教程
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
C#事件
事件(event),这个词儿对于初学者来说,往往总是显得有些神秘,不易弄懂.而这些东西却往往又是编程中常用且非常重要的东西.大家都知道windows消息处理机制的重要,其实C#事件就是基于window ...
jQuery DateTimePicker 日期和时间插件
jQuery UI很强大,其中的日期选择插件Datepicker是一个配置灵活的插件,我们可以自定义其展示方式,包括日期格式.语言.限制选择日期范围.添加相关按钮以及其它导航等. 日期选择插件是一个配 ...
junit测试，使用classpath和file 加载文件的区别
用junit测试发现一个问题,怎么加载配置文件?一直都出现这样的错误 ERROR: org.springframework.test.context.TestContextManager - Caug ...
CSS学习笔记2-2d变换和过渡属性
前言:今天又是一个周末,心情不错,趁着闲暇之余,把剩下来的CSS3学习的内容全部整理出来,练习用的源码也稍微整理了一下. 2D转换 transform:translate||rotate||scale ...
C++类的静态成员详解
类的静态成员分为静态数据成员和静态成员函数静态数据成员假如我们要设计一个战争游戏,游戏中有许多的兵种.游戏的过程中,每隔一段时间每个兵种都会产生,同时由于战争的消耗,每个兵种士兵的数量又会减少.为 ...
Windows无法安装到这个磁盘。请确保在计算机的BIOS菜单中启用了磁盘控制器
今天一朋友问我这个问题,呃,以前我也遇到过,但忘记记录了,这次就记录一下吧,就懒得打字了,图片里面很清楚了不说点什么的话是不是太水了O(∩_∩)O~,好吧扩充一下: Windows无法安装到这个磁盘 ...
Sql Server系列：运算符和表达式
运算符的一些符号,他们能够用于执行算术运算.字符串连接.赋值以及在字段.常量和变量之间进行比较.在SQL Server 2012中,运算符主要由以下6大类:算术运算符.赋值运算符.比较运算符.逻辑运算 ...
MVC4做网站后台:栏目管理3、删除栏目与左侧列表菜单
一.左侧列表菜单打开视图Menu.cshtml,增加部分见红框在category中添加脚本 //栏目菜单加载完毕函数 function CategoryMenu_Ready() { $('#cat ...

bootstrap分页

bootstrap分页的更多相关文章

随机推荐

热门专题