Bootstrap table 分页 In asp.net MVC

时间：2022-09-10 09:57:46

中文翻译文档：

http://blog.csdn.net/rickiyeat/article/details/56483577

版本说明：

Jquery v2.1.1

Bootstrap V3.3.7

bootstrap-table V1.11.1

一、视图页

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <title>测试</title>

     <link href="/Content/bootstrap.min.css" rel="stylesheet">

     <link href="/Content/bootstrap-table.min.css" rel="stylesheet">

     <script src="/Scripts/modernizr-2.8.3.js"></script>

 </head>

 <body>

     <div class="container">

         <div class="row">

             <div id="test_toolbar" class="btn-group">

                 <button id="btnEdit" type="button" class="btn btn-default">

                     <span class="fa fa-pencil-square-o" aria-hidden="true"></span>批量显示

                 </button>

                 <button id="btnDelete" type="button" class="btn btn-default">

                     <span class="fa fa-trash-o" aria-hidden="true"></span>批量删除

                 </button>

             </div>

             <table id="test_Table" class="table-striped table-hover" data-reorderable-columns="true"></table>

         </div>

     </div>

     <script src="/Scripts/jquery/jquery-2.1.1.min.js"></script>

     <script src="/Scripts/bootstrap.min.js"></script>

     <script src="/Scripts/respond.min.js"></script>

     <script src="/Scripts/bootstrap-table.min.js"></script>

     <script src="/Scripts/bootstrap-table-zh-CN.js"></script>

     <script src="~/Scripts/js/Activity/Comment.js"></script>

     <script>

         $(function () {

         //1.初始化Table

         var oTable = new TableInit();

         oTable.Init();

         //2.初始化Button的点击事件

         var oButtonInit = new ButtonInit();

         oButtonInit.Init();

     });

     </script>

 </body>

 </html>

二、处理脚本

 var TableInit = function () {

     var oTableInit = new Object();

     //初始化Table

     oTableInit.Init = function () {

         $('#test_Table').bootstrapTable({

             url: "test",

             method: 'get',

             datatype: 'json',

             contentType: "application/x-www-form-urlencoded",

             toolbar: '#test_toolbar',

             striped: false, //是否显示行间隔色

             cache: false,

             pagination: true,

             sortable: false,

             sortName: 'AddDate',

             sortOrder: "asc",

             queryParams: oTableInit.queryParams,

             sidePagination: "server",

             pageNumber: 1,

             pageSize: 20,

             pageList: [20, 30, 50, 100],

             paginationPreText: '上一页',

             paginationNextText: '下一页',

             search: false,

             strictSearch: false,

             showColumns: false,

             showRefresh: true,

             minimumCountColumns: 2,

             clickToSelect: true,//单击行选中

             height: 600,

             idField: "Id",

             uniqueId: "Id", //唯一标识列

             showToggle: false,

             cardView: false,

             detailView: false,

             showHeader: true,

             singleSelect: false,//是否单选

             checkboxHeader: true,

             columns: [

                 { checkbox: true },

             {

                 title: '序号', field: 'No', width: '50', align: 'center', formatter: function (value, row, index) {

                     return index + 1;

                 }

             },

             { field: 'Id', title: 'Id', visible: false },

             {

                 field: 'Operate',

                 title: '操作',

                 width: '100',

                 halign: 'center',

                 align: 'center',

                 formatter: function (value, row, index) {

                     var strHtml = "<a title='编辑' onclick='btnEdit(\"" + row.Id + "\")'  href='javascript:void(0);'><i class='fa fa-pencil fa-fw'></i></a> &nbsp;";

                     strHtml += "<a title='删除' onclick='btnDelete(\"" + row.Id + "\")' href='javascript:void(0);'><i class='fa fa-trash-o'></i></a>";

                     return strHtml;

                 }

             },//或者

                 {

                     field: 'Operate', title: '操作', width: '80', halign: 'center', align: 'left',

                     events: operateEvents,

                     formatter: function (value, row, index) {

                         var strHtml = "<a class='upload' title='上传'  href='javascript:void(0);'><i class='fa fa-upload fa-fw'></i></a>&nbsp;";

                         strHtml += "<a class='remove' title='删除'  href='javascript:void(0);'><i class='fa fa-trash-o fa-fw'></i></a>";

                         return strHtml;

                     }

                 }

             ]

         });

     };

     //传递后台的参数

     oTableInit.queryParams = function (params) {

         //参数对应表格参数

         /* 方式一 var temp1 = {

              rows: this.pageSize,

              page: this.pageNumber,

              sort: this.sortName,

              order: this.sortOrder

          };*/

         //序列化表单数据

         var searchWhere = $("#activity_SearchForm").serializeFormToJson();

         //方式二

         var temp = {

             limit: params.limit,   //页面大小

             offset: params.offset / params.limit,  //页码

             searchWhere: JSON.stringify(searchWhere)//JSON字符串参数

         };

         return temp;

     };

     oTableInit.responseHandler = function (res) {

         if (res) {

             return {

                 "rows": res.result,

                 "total": res.totalCount

             };

         } else {

             return {

                 "rows": [],

                 "total": 0

             };

         }

     };

     return oTableInit;

 };

 var ButtonInit = function () {

     var oInit = new Object();

     oInit.Init = function () {

         //清空查询条件

         $("#btnClear").click(function () {

            //...

         });

         //查询

         $("#btnSearch").click(function () {

             $("#test_Table").bootstrapTable('refresh');

         });

         //批量显示

         $("#btnEdit").click(function () {

             var selectRow = $("#test_Table").bootstrapTable('getSelections');

             if (selectRow.length <= 0) {

                 $.modalAlert("请先选中要操作的数据行。", "warning");

             }

             var ids = new Array();

             $.each(selectRow, function (i, row) {

                 ids[i] = row["Id"];

             });

             $.confirmForm({

               //...

             });

         });

         //批量删除

         $("#btnDelete").click(function () {

             var selectRow = $("#test_Table").bootstrapTable('getSelections');

             if (selectRow.length <= 0) {

                 $.modalAlert("请先选中要操作的数据行。", "warning");

             }

             var ids = new Array();

             $.each(selectRow, function (i, row) {

                 ids[i] = row["Id"];

             });

             $.deleteForm({

             //...

             });

         });

     };

     return oInit;

 };

 //编辑

 var btnEdit = function (key) {

   //...

 }

 //删除

 var btnDelete = function (key) {

    //...

 }

 //行事件或采用以下方式

 //操作监听事件

 window.operateEvents = {

     //删除数据行

     'click .remove': function (e, value, row, index) {

         $('#test_Table').bootstrapTable('remove', { field: 'Id', values: [row['Id']] });

     },

     //上传

     'click .upload': function (e, value, row, index) {

        //...

     }

 };

三、后端处理

         /// <summary>

         /// test

         /// </summary>

         /// <param name="limit">页数据大小</param>

         /// <param name="offset">页码</param>

         /// <param name="searchWhere"></param>

         /// <returns></returns>

         [HttpGet]

         [AjaxOnly]

         public JsonResult GetCommentGridJson(int limit, int offset, string searchWhere)

         {

             //总数

             int rowCount = ;

             IList<T> list = null;

             return Json(new { total = rowCount, rows = list });

         }

         //返回JSON必须包含total,rows

Bootstrap table 分页 In asp.net MVC的更多相关文章

  1. &lbrack;转&rsqb;Bootstrap table 分页 In asp&period;net MVC

    本文转自:https://www.cnblogs.com/lenovo_tiger_love/p/7474403.html 中文翻译文档: http://blog.csdn.net/rickiyeat ...

  2. Bootstrap table分页问题汇总

    首先非常感谢作者针对bootstrap table分页问题进行详细的整理,并分享给了大家,希望通过这篇文章可以帮助大家解决Bootstrap table分页的各种问题,谢谢大家的阅读. 问题1 :服务 ...

  3. bootstrap table分页（前后端两种方式实现）

    bootstrap table分页的两种方式: 前端分页:一次性从数据库查询所有的数据,在前端进行分页(数据量小的时候或者逻辑处理不复杂的话可以使用前端分页) 服务器分页:每次只查询当前页面加载所需要 ...

  4. MvcPager 概述 MvcPager 分页示例 — 标准Ajax分页 对SEO进行优化的ajax分页 &lpar;支持asp&period;net mvc&rpar;

    该示例演示如何使用MvcPager最基本的Ajax分页模式. 使用AjaxHelper的Pager扩展方法来实现Ajax分页,使用Ajax分页模式时,必须至少指定MvcAjaxOptions的Upda ...

  5. LayUI分页基于ASP&period;NET MVC

    ---恢复内容开始--- 今天写了挺久的分页,百度了很多都没有很好的.Net实例,今天我来更新一期关于layuiTable分页 首先你得理解layui的官方文档的Table分页部分,我在这里附上地址 ...

  6. bootstrap table 分页序号递增问题 （转）

    原文地址:https://segmentfault.com/q/1010000011040346 如题,怎么在bootstrap table中显示序号,序号递增,并且分页有效,等于是每页10条,第2页 ...

  7. bootstrap table分页，重新数据查询时页码为当前页问题

    问题描述: 使用bootstrap table时遇到一个小问题,第一次查询数据未5页,翻页到第5页后,选中条件再次查询数据时,传到后端页码仍旧为5,而此时数据量小于5页,表格显示为未查询到数据. 处理 ...

  8. bootstrap table分页limit计算pageIndex和pageSize

    由于bootstrap table的js无法直接获取pageSize和pageIndex的值,只能通过limit进行计算.

  9. bootstrap table 分页后&comma;重新搜索的问题

    前提: 自定义搜索且有分页功能,比如搜索产品名的功能. 现象:当搜索充气娃娃的时候返回100条记录,翻到第五页.  这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的 ...

随机推荐

  1. LPTHW 结束了

    基本上在学习了LPTHW的 类 继承 和 合成以后基本就结束. 后面几章都是根据web.py进行网页编程,以及自动化测试的.目前来看不太感兴趣. 稍后我可能找个实际项目进行锻炼下,比如 Crossin ...

  2. hdu2896

    数据水,但是各种wa各种t各种re最后照着别人的改了改发现了毛病 数组做指针传入的时候系统是不知道传入后的数字的长度的如果用memset他就只会讲指针的地方清零 #include<iostrea ...

  3. js 去掉空格

    写成类的方法格式如下:(str.trim();)<script language="javascript"> String.prototype.trim=functio ...

  4. CSS中的字体描边

    兴趣使然,突然看见网上的一些带有描边的字体,觉得有点意思,便尝试去做了下 不是什么很厉害的技巧,当然也有参考张鑫旭大神写的文章 只能感叹,css的世界还很大,很广阔 直入主题: 对于文字的描边,一般都 ...

  5. 移动端Web界面滚动touch事件

    解决办法一: elem.addEventListener( 'touchstart', fn, { passive: false } ); 解决办法二: * { touch-action: pan-y ...

  6. DNS Wildcard（DNS泛域名）

    在DNS中,泛域名(wildcard Resource Record)可以被认为是一种合成RR的机制,借助于它,DNS服务器可以响应本来不存在的域名的请求,它的设计初衷是用来把所有邮件都转发到一个邮件 ...

  7. 08&colon; Django使用haystack借助Whoosh实现全文搜索功能

    参考文章01:http://python.jobbole.com/86123/ 参考文章02: https://segmentfault.com/a/1190000010866019 参考官网自定制v ...

  8. CDH部署（以5&period;7&period;5为例）

    博客园首发,转载请注明出处https://www.cnblogs.com/tzxxh/p/9120020.html 一.准备工作(下面的内容括号内写master的表示仅在master节点执行,all代 ...

  9. 最新flowable研究学习及其汉化flowable6&period;3中文

    flowable 是activiti的分支,现在感觉比activiti要强大一些,官网是 https://flowable.org/ 下载最新的6.31版本. 放到tomcat下面,汉化需要对flow ...

  10. 常用模块之hashlib&comma;configparser&comma;logging模块

    常用模块二 hashlib模块 hashlib提供了常见的摘要算法,如md5和sha1等等. 那么什么是摘要算法呢?摘要算法又称为哈希算法.散列算法.它通过一个函数,把任意长度的数据转换为一个长度固定 ...

相关文章