JQuery实现简单分页（DataTable,pagination）

DataTable分页（前端分页，后台不需要任何处理）

 $('#tblResult').DataTable({// columnDefs:[{ orderable:false, targets:[0]   }] ,aaSorting: [[0, 'asc']],paging: true,//分頁searching: false,//不搜索scrollY: 380,//垂直滾動pageLength: 10,//显示多少条数据lengthChange: true,//可以選擇是否開啟lengthMenu: [    //可以選擇的內容[5, 10, 20, -1],['5条', '10条', '20条', '全部']],language: {                              // 这是修改语言的显示paginate: {first: "首條",previous: "前一頁",next: "下一頁",last: "，末頁"},lengthMenu: "每頁顯示 _MENU_ 項結果"},data: $.parseJSON(r),//數據源columns: [{ data: 'FATP_WORK' }, { data: 'FATP_MODEL' }]});

pagination分页（主要用插件渲染页数和翻页动作，其他通过后台索引分页）

//初始化数据
$("#pagingArea").pagination({items: 0,itemsOnPage: 10,cssStyle: 'light-theme',onPageClick: function () { var idx = $("#pagingArea").pagination('getCurrentPage'); LargeBoardQuery.fillDetail(idx); }});//执行LargeBoardQuery.fillDetail后台方法返回值
function (result) {var data = $.parseJSON(result);$("#tblYield tr:not(:first)").remove();//刷新之后移除前一页内容；if (data.length == 0) {$("#tblYield").append("<tr><td colspan='12' style='text-align:center'><strong>No Data Found</strong></td></tr>");} else {$("#pagingArea").pagination('updateItems', data[0].NUM);}$.each(data, function (i, o) {var htmtxt = "<tr><td>" + (i + 1 + (idx - 1) * 10) + "</td>";htmtxt += "<td >" + o.DEPT_CODE + "</td>";htmtxt += "<td >" + o.CREATED_BY + "</td>";htmtxt += "<td >" + o.CREATED_TIME.replace("T", "  ") + "</td>";$("#tblYield").append(htmtxt);});App.unblockUI($("#divSearch"));});

后台（因为有pagination进行渲染，所以偷了下懒，只传输了页数page，其他在pagination中进行配置。）

public DataSet CallLargeBoardInfo(string model, string fromTime, string toTime, string page){int lpage_start = 0;int lpage_end = 0;model = model.Replace(",", "','");string sql = "SELECT rownum t,(select count(*) from TableName) NUM,a.* FROM TableNamea ";if (!string.IsNullOrEmpty(page)){lpage_start = (int.Parse(page) - 1) * 10 + 1;lpage_end = int.Parse(page) * 10;sql += "AND rownum <= " + lpage_end + "";sql = "select * from (" + sql + ") where t>=" + lpage_start + "";}DataSet menus = DBContext.ExcuteSql(sql).ToDataSet();return menus;}

DataSet数据传输到前端需要转换。

return Newtonsoft.Json.JsonConvert.SerializeObject(menus.Tables[0]);

JQuery实现简单分页（DataTable,pagination）相关推荐

jquery前端简单分页_如何使用jQuery创建简单的分页
jquery前端简单分页 How to create easy pagination with jQuery jQuery pagination. All we know, that when we ...
jQuery实现简单分页
现在项目分页好多都是直接用插件,今天发现其实自己写页不难.主要是以前老师讲的时候没听.(对不起老何!哈哈) 今天发布一个前端超简单的分页效果,纯jQ!废话不多说,上代码.要是你们需要,直接复制过去就可 ...
基于jquery的简单分页实现
先上图: 之前在做表格插件想把分页整合进去,原本去网站找一个现成的整合进去,发现有些太简单或者很复杂,达不到自己的要求,自己想还是自己整一个,顺便了解一下其中的原理. 分页样式是基于boostarp的 ...
jQuery实现简单分页(jqPaginator插件)
文章目录前言一.jqPaginator是什么? 二.使用步骤 1.引入库 2.读入数据 3.参数文档三.完整项目实现案列 1.先上效果 2.搭建Servlet运行环境 3.建一个项目 4.后端代 ...
Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
combobox 怎么实现对listview的类别查询_通过 Django Pagination 实现简单分页
作者:HelloGitHub-追梦人物文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库当博客上发布的文章越来越多时,通常需要进行分页显示,以免所有的文章都堆积在一个页面,影 ...
jQueryPager(JQuery分页插件pagination实现Ajax分页)
jQueryPager(JQuery分页插件pagination实现Ajax分页) 下载地址 jQueryPager(JQuery分页插件pagination实现Ajax分页).rar 转载于:htt ...
jquery实现简单的分页功能
jquery实现简单的分页功能本文适合少量数据的使用,如果数据条数过多,不太适合! 页面html代码 <table>  </table> ...
php jquery 全选删除,jQuery+php简单实现全选删除的方法
jQuery+php简单实现全选删除的方法发布于 2017-08-06 10:13:21 | 66 次阅读 | 评论: 0 | 来源: 网友投递 PHP开源脚本语言PHP(外文名: Hypertex ...

JQuery实现简单分页（DataTable,pagination）

JQuery实现简单分页（DataTable,pagination）相关推荐

最新文章

热门文章