bootstrap table 服务端分页

前端js

    $(function () {
            //$(‘#MDTable‘).bootstrapTable(‘destroy‘);
            $("#MDTable").bootstrapTable({    //‘destroy‘ 是必须要加的==作用是加载服务器数据,初始化表格的内容Destroy the bootstrap table.
                toolbar: ‘#toolbar‘, //工具按钮用哪个容器
                method: ‘get‘,
                url: "/MD_All/MD_Data",
                contentType: "application/x-www-form-urlencoded",
                dataType: "json",
                pagination: true, //是否显示分页(*)
                striped: true,//隔行换色
                sidePagination: ‘server‘,//分页方式
                pageNumber: 1,//初始化table时显示的页码
                pageSize: 5,//每页条目
                pageList: [5, 10, 20, 50, 100],
                //queryParams: queryParams,
                locale: ‘zh-CN‘,
                sortable: true,//排序
                showColumns: true,//是否显示 内容列下拉框
                clickToSelect: true,//点击选中checkbox
                singleSelect: true,//启用单行选中
                showExport: true,                     //是否显示导出
                exportDataType: "all",              //basic‘, ‘all‘, ‘selected‘.
                queryParamsType: "", //默认值为 ‘limit‘ ,在默认情况下 传给服务端的参数为:offset,limit,sort
                // 设置为 ‘‘  在这种情况下传给服务器的参数为:pageSize,pageNumber
                queryParams: function queryParams(params) {   //设置查询参数
                    var param = {
                        pageNumber: params.pageNumber,
                        pageSize: params.pageSize,
                    };
                    return param;
                },
                columns: [
                    {
                        field: ‘MaterialID‘,
                        title: ‘物料号‘
                    }, {
                        field: ‘OldMaterialID‘,
                        title: ‘旧物料号‘
                    }, {
                        field: ‘IndustryFeild‘,
                        title: ‘行业领域‘
                    }]
            });
    });

后端

        public ActionResult MD_Data()
        {
            try
            {int pageSize = Request["pageSize"] == null ? 2 : int.Parse(Request["pageSize"]);
                int pageNumber = Request["pageNumber"] == null ? 1 : int.Parse(Request["pageNumber"]);

                var list = _unitOfWork.MD_All.Get();
                List<MD_All> lst = new List<MD_All>();
                var array = list.ToArray();
                for (int i = (pageNumber - 1) * pageSize; i < pageNumber * pageSize && i < array.Length; i++)
                {
                    lst.Add(array[i]);
                }
                int total = list.Count();
          //这里需要返回给前端总数和列表信息 需要把json组合下
                JsonObj obj = new JsonObj() { rows = lst, total = total };

                return Json(obj, JsonRequestBehavior.AllowGet);
            }
            catch (Exception ex)
            {
                //获取信息出错
                return Json("false");
            }
        }

这是要组合的json格式

public class JsonObj
    {

        public List<MD_All> rows { get; set; }
        public int total { get; set; }

    }

分页问题汇总

http://www.jb51.net/article/85373.htm

参考文章

http://blog.csdn.net/lzx_longyou/article/details/50563907

http://blog.csdn.net/cslp517/article/details/50505445

http://blog.csdn.net/u013425609/article/details/51435731

http://blog.csdn.net/hanxue_tyc/article/details/54917227

表格参数

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

时间: 2024-10-23 07:49:02

bootstrap table 服务端分页的相关文章

Bootstrap-table服务端分页

bootstarp-table服务端分页 $('#test-table').bootstrapTable({ //请求方法 method: 'get', //是否显示行间隔色 striped: true, //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) cache: false, //是否显示分页(*) pagination: true, //是否启用排序 sortable: false, //排序方式 sortOrder: "asc", //初始化加载第一

关于bootstrap table的server分页

首先是bootstrap初始化的表格参数: // 初始化Table oTableInit.Init = function() { $('#booksTable').bootstrapTable({ url : '/TestWeb/booksTable', // 请求后台的URL(*) method : 'get', // 请求方式(*) toolbar : '#toolbar', // 工具按钮用哪个容器 striped : true, // 是否显示行间隔色 cache : false, //

BootStrap-table 客户端分页和服务端分页的区别

当服务器没有对数据进行分页时,前端页面设计又要求进行分页,要分开来设置. 服务端分页: responseHandler: function(data){ return data.response; }, 客户端分页,需要指定到rows: sidePagination : "client", responseHandler: function(data){ return data.response.rows; },

ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

引言: 本人想自己个博客网站出来,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之后,发现即使你用了bootstrap还是要自己写css样式,都是自学的,前端真的很垃圾,在网上找了很多UI,以下是各种UI的地址,需要的可以去看看: H-ui:http://www.h-ui.net/H-ui.admin.shtml ,是一个前端大牛弄得,模仿bootstrap,做适合中国网上的UI

项目实战之服务端分页的实现——SQL

服务端的分页就一个SQL语句就可以搞定,贴出代码后自己慢慢欣赏: CREATE Procedure AppGetEmpList @EID int, @LGID int, @pagesize int, @pageindex int As Begin select count(*) count from appemployee Select a.ID,a.EID,Case When @LGID=2052 Then Name Else eName End Name,DepTitle,JobTitle

bootstrap table两种分页需要的数据不同

先上原帖地址:http://blog.csdn.net/tyrant_800/article/details/50269723 问题描述: 调用$("#show_list_table").bootstrapTable("refresh");刷新table以后,搜索条件可以传入,也请求到了数据,但是就是不在table中展示数据. 最后发现是因为服务器端分页和客户端分页需要的json格式不一样. 原帖内容: 服务器分页/客户端分页的转换,table刷新 bootstra

Datables 服务端分页for DJango

安装 django-datatables-view pip install django-datatables-view 前端配置-JS部分 $('#mytable').DataTable({ "paging": true, "lengthChange": true, "searching": true, "ordering": true, "info": true, "autoWidth&quo

bootstraptable 服务端分页问题

折腾了将近一周 终于分页好了 无语 先写下来 怕后面又忘了 前台写js时有几个点要注意: 1.contentType要设为application/x-www-form-urlencoded 2.queryParamsType设为''(为了方便,前台直接传pagesize就好) 1 $('#tablelist').bootstrapTable({ 2 url: url 3 method:'post', 4 toolbar: '#toolbar', //工具按钮用哪个容器 5 pagination:

bootstrap table 分页后,重新搜索的问题

前提: 自定义搜索且有分页功能,比如搜索产品名的功能. 现象:当搜索充气娃娃的时候返回100条记录,翻到第五页.  这时候搜索按摩棒,数据有200条,结果应该是第一页的记录,但是实际显示的还是第五页的结果.  也就是重新搜索后,pagenumber没有变. 按网上大部分说的:重新设置option就行了 $('#tableList').bootstrapTable({pageNumber:1,pageSize:10}); 以上是解决不了这个问题. 正确做法是 $("#table").bo