zoukankan      html  css  js  c++  java
  • 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

     

    二、筛选条件后的table数据也是进行了分页处理,但是点击第二页时,筛选条件并未传入后端

    queryParams: function queryParams(params) {   //设置查询参数
                        var param = {
                            pageNumber: params.pageNumber,
                            pageSize: params.pageSize,
                            MaterialID: $("#MaterialID").val(),
                            Factory: $("#Factory").val(),
                            MaterialType: $("#MaterialType").val(),
                            LogStartDate: $("#LogStartDate").val(),
                            LogEndDate: $("#LogEndDate").val(),
                            FileName: $("#FileName").val(),
                            Status: $("#Status").val()
                        };
                        return param;
                    },

    在分页传入的params中加入筛选的条件,后端即可获得数据,筛选条件分页OK

    参考

    https://www.cnblogs.com/ziyoublog/p/9055790.html

     

     

  • 相关阅读:
    oracle循环语句
    解决使用Properties读取中文乱码问题
    oracle常用& to_date()怎么转换带am pm的时间格式
    distinct 多列详解
    javascript中遍历EL表达式List集合中的值
    最近一段时间代码汇总
    JAVA基础之对象的初始化
    求解圆圈中最后剩下的数字
    删除有序链表中的重复结点
    构造二叉树,并求解树的高度
  • 原文地址:https://www.cnblogs.com/seanjack/p/7457280.html
Copyright © 2011-2022 走看看