jQuery、Ajax分页
1、效果预览
2、HTML代码
- <div class="row">
- <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12">
- <table class="table table-striped table-hover table-bordered bootstrap-datatable " id="TemplateTable">
- <thead>
- <tr>
- <td>模板名称</td>
- <td style="width: 400px;">短信内容</td>
- <td>操作</td>
- </tr>
- </thead>
- <tbody>
- </tbody>
- </table>
- </div>
- </div>
- <div class="row" style="margin-top: 15px;">
- <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12">
- <div style="font-size: 14px;">共<label style="color: #20A8D8; font-size: 14px;" id="pageCount">0</label>条记录</div>
- </div>
- </div>
- <div class="row">
- <div class="col-lg-12 col-sm-12 col-xs-12 col-xxs-12">
- <div id="MainContent_AspNetPager_Msg" class="paginator">
- <a style="margin-right: 5px; cursor: pointer;" href="javascript:void(0)" onclick="PageIndexClick(this)" id="FirstPage" pageindex="1">首 页 </a>
- <a style="margin-right: 5px; cursor: pointer;" href="javascript:void(0)" onclick="PageIndexClick(this)" id="TopPage" pageindex="0">← 上一页</a>
- <span class="cpb" style="margin-right: 5px; cursor: pointer;" id="CurrenPageSize">1</span>
- <a style="margin-right: 5px; cursor: pointer;" href="javascript:void(0)" onclick="PageIndexClick(this)" id="NextPage" pageindex="0">→ 下一页</a>
- <a style="margin-right: 5px; cursor: pointer;" href="javascript:void(0)" onclick="PageIndexClick(this)" id="LastPage" pageindex="0"> 尾 页 </a>
- </div>
- </div>
- </div>
3、JS代码
- //载入短信模板内容-分页
- function TemplateAjax() {
- $('#TemplateTable tbody tr').remove();//清空Table tbody
- AjaxPage(1, PageSize);
- }
- //当前页,显示条数
- function AjaxPage(curpage, PageSize) {
- //省
- var ProvinceId = $('#MainContent_ddlsheng').val();
- //市
- var CityId = $('#MainContent_ddlshi').val();
- $.ajax({
- cache: false,
- url: "/ajaxpage/getajax.aspx?t=smsplateformtemplateajaxpage&ProvinceId=" + ProvinceId + "&CityId=" + CityId + "&CurPage=" + curpage + "&PageSize=" + PageSize + "&a=" + Math.random(),
- dataType: 'json',
- success: function (data) {
- if (data != null) {
- var str = '';
- for (var i in data["Data"]) {
- var Content = data["Data"][i]["SmsTemplateContent"];
- if (Content.length >= 60) {
- Content = Content.substring(0, 60);
- }
- str += "<tr><td>" + data["Data"][i]["SmsTemplateName"] + "</td><td>" + Content + "</td><td><input type='button' value=' 删 除 ' class='btn btn-primary' onclick='TemplateDelete(" + data["Data"][i]["Id"] + ")'/></td></tr>";
- }
- $('#TemplateTable tbody').html(str);
- RecordCount = data["RecordCount"];
- $('#pageCount').html(RecordCount);
- }
- }
- })
- }
- //首页、上一页、下一页、尾页点击
- function PageIndexClick(obj) {
- //当前第几页
- var CurrenPageSize = $('#CurrenPageSize').html();
- //id
- var type = $(obj).attr('id');
- //首页
- if (type == 'FirstPage') {
- CurrenPageSize = 1;
- AjaxPage(CurrenPageSize, PageSize);
- $('#CurrenPageSize').html('1');
- }
- //上一页
- else if (type == 'TopPage') {
- if (CurrenPageSize > 1) {
- CurrenPageSize = parseInt(CurrenPageSize) - 1;
- } else {
- CurrenPageSize = 1;
- }
- AjaxPage(CurrenPageSize, PageSize);
- $('#CurrenPageSize').html(CurrenPageSize);
- }
- //下一页
- else if (type == 'NextPage') {
- var size = parseInt(CurrenPageSize) + 1;
- var maxpage = RecordCount % PageSize == 0 ? parseInt(RecordCount / PageSize) : (parseInt(RecordCount / PageSize) + 1);
- if (size <= maxpage) {
- CurrenPageSize = parseInt(CurrenPageSize) + 1
- }
- AjaxPage(CurrenPageSize, PageSize);
- $('#CurrenPageSize').html(CurrenPageSize);
- }
- //尾页
- else if (type == 'LastPage') {
- CurrenPageSize = (RecordCount % PageSize == 0 ?
- parseInt(RecordCount / PageSize) : parseInt(RecordCount / PageSize) + 1);
- AjaxPage(CurrenPageSize, PageSize);
- $('#CurrenPageSize').html(CurrenPageSize);
- }
- }
- //删除模板
- function TemplateDelete(id) {
- $.ajax({
- cache: false,
- url: "/ajaxpage/getajax.aspx?t=smsplateformtemplateajaxdelete&Id=" + id + "&a=" + Math.random(),
- dataType: 'json',
- success: function (data) {
- if (data != null) {
- alert(data['result']);
- AjaxPage(1, PageSize);
- }
- }
- });
- }
4、C#后台代码
- if(Request.QueryString["t"] == "smsplateformtemplateajaxpage")
- {
- try
- {
- string ProvinceId = Request.QueryString["ProvinceId"];
- string CityId = Request.QueryString["CityId"];
- int CurPage = 1;//当前第几页
- int.TryParse(Request.QueryString["CurPage"], out CurPage);
- int PageSize = 5;//每页显示多少条数据
- int.TryParse(Request.QueryString["PageSize"], out PageSize);
- StringBuilder sb = new StringBuilder();
- sb.Append(" 1=1 and (delete_flag IS NULL OR delete_flag=0)");
- //省
- if (ProvinceId != null && !string.IsNullOrEmpty(ProvinceId) && ProvinceId != "0")
- {
- sb.Append(string.Format(" and ProvinceId={0} ", ProvinceId.Trim()));
- }
- //市
- if (!string.IsNullOrEmpty(CityId) && CityId != "0" && CityId != "null")
- {
- sb.Append(string.Format(" and CityId={0} ", CityId.Trim()));
- }
- PageArgs pageArgs = new PageArgs();
- pageArgs.PageSize = PageSize;
- pageArgs.PageIndex = CurPage;
- pageArgs.TableName = "D_SMSTemplate";
- pageArgs.PrimaryKey = "Id";
- pageArgs.Fields = "";
- pageArgs.Filter = sb.ToString();
- pageArgs.Order = " create_time desc";
- IList<SMSTemplateEntity> list = new SMSTemplateBLL().GetSMSTemplateAll(ref pageArgs);
- List<Dictionary<string, object>> li = new List<Dictionary<string, object>>();
- Dictionary<string, object> dic = new Dictionary<string, object>();
- dic.Add("RecordCount", pageArgs.RecordCount);//总条数
- dic.Add("Data", list);
- JavaScriptSerializer serializer = new JavaScriptSerializer();
- var result = serializer.Serialize(dic);
- Response.Write(result);
- }
- catch
- {
- Response.Write(null);
- }
- }
******************************************别墅图纸推荐*************************************************
版权声明:本文博客原创文章,博客,未经同意,不得转载。
jQuery、Ajax分页的更多相关文章
- 转:精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- 分享一个手机端好用的jquery ajax分页类
分享一个手机端好用的jquery ajax分页类 jquery-ias.min.js 1,引入jquery-ias.min.js 2,调用ajax分页 <script type="te ...
- 12款优秀 jQuery Ajax 分页插件和教程
12款优秀 jQuery Ajax 分页插件和教程 在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 W ...
- jquery ajax分页写法
jquery ajax分页写法我用的是laypage插件 前端代码<pre> function demo(curr) { $.getJSON('/home/index/getinfo', ...
- 精心挑选的12款优秀 jQuery Ajax 分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- Pagination jquery ajax 分页参考资料
http://www.zhangxinxu.com/wordpress/2010/01/jquery-pagination-ajax%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB% ...
- 12款优秀jQuery Ajax分页插件和教程
在这篇文章中,我为大家收集了12个基于 jQuery 框架的 Ajax 分页插件,这些插件都提供了详细的使用教程和演示.Ajax 技术的出现使得 Web 项目的用户体验有了极大的提高,如今借助优秀的 ...
- jquery+ajax分页
先看效果图:
- jquery ajax 分页2
/* * 分页 $("#divPager").flexipager * 2015.03.17 */ //初始化列表默认属性 (function($) { $.addFlex = f ...
- jquery ajax 分页
<script src="../Js/jQuery/jquery-1.8.2.min.js" type="text/javascript">< ...
随机推荐
- SessionFactory的创建和Session的获得
1.当我们调用 Configuration config=new Configuration().configure(); 时候Hibernate会自己主动在当前的CLASSPATH中搜寻hibern ...
- Linux内核的同步机制---自旋锁
自旋锁的思考:http://bbs.chinaunix.net/thread-2333160-1-1.html 近期在看宋宝华的<设备驱动开发具体解释>第二版.看到自旋锁的部分,有些疑惑. ...
- Java EE (5) -- Java EE 6 JavaServer Faces Developer Certified Expert(1z0-896)
Section 1: Essentials of JSF2.0 Identify the features of JSF such as Facelets, BookMarkable View, AJ ...
- 【Android开发经验】使用反射,得到的类的字段、方法、并实现了简单的调用
本文后推出Android的ICO框架做准备,所以,假设你想要一个最近的一项研究Android的ICO学生框架.你可以稍微看一下. 首先,简介一下Java里面的反射. JAVA反射机制是在执行状态中,对 ...
- 使用CMakeLists.txt 判断编译器是否支持C++11
#将下面的内容添加到CMakeLists.txt当中include(CheckCXXCompilerFlag) CHECK_CXX_COMPILER_FLAG("-std=c++11&quo ...
- MySQL 最经常使用的一千行
/* 启动MySQL */ net start mysql /* 连接和断开server */ mysql -h 住址 -P port -u username -p password /* 跳过许可认 ...
- addChildViewController transitionFromViewController nib storyboard
本文记录addChildViewController由transitionFromViewController方法nib,storyboard的不同的效果. 在进行切换效果时,注意属于同一个story ...
- 利用HttpOnly来防御xss攻击
xss的概念就不用多说了,它的危害是极大的,这就意味着一旦你的站点出现xss漏洞,就能够运行随意的js代码,最可怕的是攻击者利用js获取cookie或者session劫持,假设这里面包括了大量敏感信息 ...
- 《Linux Device Drivers》第十六章 块设备驱动程序——note
基本介绍 块设备驱动程序通过主传动固定大小数据的随机访问设备 Linux核心Visual块设备作为基本设备和不同的字符设备类型 Linux块设备驱动程序接口,使块设备最大限度地发挥其效用.一个问题 一 ...
- ASP.NET2.0自定义控件组件开发 第六章 深入讲解控件的属性
原文:ASP.NET2.0自定义控件组件开发 第六章 深入讲解控件的属性 深入讲解控件的属性持久化(一) 系列文章链接: ASP.NET自定义控件组件开发 第一章 待续 ASP.NET自定义控件组件开 ...