点这里进入ABP进阶教程目录

解读参数

  • l - length changing input control (左上,每页显示记录数)

  • f - filtering input (右上,过滤条件)

  • t - The table (中央,数据表格)

  • r - processing display element (中央,过场动画)

  • i - Table information summary (左下,表格信息)

  • p - pagination control (右下,分页)

布局配置

打开展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\Course\Index.js //用以存放Course查询相关脚本

配置插件参数.

左上,每页显示记录数

aLengthMenu

设置每页显示记录数的下拉框,第一项为默认值.

aLengthMenu: [[10, 25, 50, -1], [10, 25, 50, "全部"]], //每页显示记录数

左下,表格信息

sInfo

设置表格信息显示内容及格式

注: 格式为"_大写英文_"的是内置参数.

例如:

_PAGE_ //当前页数

_PAGES_ //总页数

"sInfo": "显示第 _START_ 至 _END_ 项记录,共 _TOTAL_ 项", //当有数据时显示当前记录范围
"sInfo": "第 _PAGE_ 页/共 _PAGES_ 页", //当有数据时显示当前页
"sInfoEmpty": "显示第 0 至 0 项记录 / 共 0 项", //当无数据时显示
"sInfoFiltered": "(从 _MAX_ 条记录过滤)", //过滤时显示

右下,分页

pagingType

设置分布类型,5种可选.

pagingType: "full_numbers", //分页类型
//可选参数
numbers // 只显示数字
simple // 只显示上页/下页
simple_numbers // 显示上页/下页/数字
full // 显示首页/末页/上页/下页
full_numbers // 显示首页/末页/上页/下页/数字

布局参数

dom

排列布局六大元素(lfrtip),顺序可任意调换.

dom: 'lfrtip', //简单布局
dom: "<'row'<'col-sm-6'l><'col-sm-6'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-6'i><'col-sm-6'p>>", //定制布局 

滚动设置

lfscrollY
默认设置高度按内容自动调整.
可手动修改设置为固定高度.
scrollY: 470, //固定高度,内容过多时显示滚动条

预览效果

布局调整效果如下.

ABP进阶教程6 - 布局配置的更多相关文章

  1. ABP进阶教程0 - 目录

    ABP进阶教程 本教程主要讲解如何基于ABP实现条件查询/分页/排序/导出/打印等功能. 源码已分享:   GitHub   Gitee ABP进阶教程0 - 目录 ABP进阶教程1 - 条件查询 A ...

  2. ABP进阶教程5 - 多语言配置

    点这里进入ABP进阶教程目录 更新脚本 打开展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views\Course\Index.js //用以存放Cours ...

  3. ABP进阶教程10 - PDF导出中文乱码

    点这里进入ABP进阶教程目录 问题描述 功能按钮 - 导出PDF,中文信息导出为乱码. 解决方案 导出PDF是通过pdfmake.js实现的. 检查发现是pdfmake引用的vfs_fonts.js字 ...

  4. ABP进阶教程7 - 功能按钮

    点这里进入ABP进阶教程目录 下载插件 打开Datatables官网(https://datatables.net/download/) 勾选Extensions/Buttons,下载插件,复制到JD ...

  5. ABP进阶教程11 - 小结

    点这里进入ABP进阶教程目录 效果预览 至此,ABP进阶教程的查询/分页/排序/导出/打印示例已完成,效果如下 登录 首页 办公室信息 院系信息 课程信息 教职员信息 学生信息 新增 修改 删除 查询 ...

  6. ABP进阶教程9 - CSV导出中文乱码

    点这里进入ABP进阶教程目录 问题描述 功能按钮 - 导出CSV,中文信息导出为乱码. 解决方案 打开展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\View ...

  7. ABP进阶教程3 - 优化编辑

    点这里进入ABP进阶教程目录 我们尝试在新增/编辑界面增加一个下拉框用来代替输入框编辑Status 添加实体 打开领域层(即JD.CRS.Core)的Entitys目录 //用以存放实体对象添加一个类 ...

  8. ABP进阶教程8 - 自定义按钮

    点这里进入ABP进阶教程目录 在功能按钮区增加一个自定义按钮 - Add(创建课程) 添加按钮 打开展示层(即JD.CRS.Web.Mvc)的\wwwroot\view-resources\Views ...

  9. ABP进阶教程4 - 分页排序

    点这里进入ABP进阶教程目录 下载插件 打开Datatables官网(https://datatables.net/download/) 下载插件,复制到JD.CRS.Web.Mvc\wwwroot\ ...

随机推荐

  1. PHP制作的掷色子点数抽奖游戏实例

    PHP制作的掷色子点数抽奖游戏实例,通过掷色子点数来达到抽奖的效果,为抽奖活动增添一些趣味性. 我们将在html页面中写下如下的html结构代码,.wrap用来放置色子和提示信息,#prize则是用来 ...

  2. gor实现线上HTTP流量复制压测引流

    一.使用背景 gor 是一款go语言实现的简单的http流量复制工具,它的主要目的是使你的生产环境HTTP真实流量在测试环境和预发布环境重现.只需要在 代理例如nginx入口服务器上执行一个进程,就可 ...

  3. 微服务与Spring Cloud基本概念、Spring Cloud版本命名方式与版本选择

    微服务是什么?Spring Cloud是什么?Spring Cloud版本命名方式?Spring Cloud版本选择? 一.微服务是什么 微服务是一种架构风格,是一种将单体应用开发为一组小型服务的方法 ...

  4. 北航软件学院Java历届期末考题整理

    文章目录 abstract static Thread finally package Exception I/O 子类和父类 关键字 标识符 垃圾收集 数据类型 环境配置 网路编程 initial ...

  5. 数据结构笔记2(c++)_跨函数使用内存的问题

    预备知识 1.所有的指针变量只占4个子节  用第一个字节的地址表示整个变量的地址 //1.cpp 所有的指针变量只占4个子节 用第一个字节的地址表示整个变量的地址 # include <stdi ...

  6. Linux—磁盘管理

    https://www.cnblogs.com/new-journey/p/10076387.html https://www.cnblogs.com/jiangxiaoxian/p/9610903. ...

  7. Linux部署NFS服务共享文件

    NFS(网络文件系统)用于linux共享文件 第1步:配置所需要的环境 使用两台Linux主机 主机名称 操作系统 IP地址 NFS Centos7 192.168.218.139 NFSa Cent ...

  8. GetPrivateProfileInt 使用方法

    GetPrivateProfileInt =>从ini文件取得数值 <参数> lpApplicationName String,指定在其中查找条目的小节.注意这个字串是不区分大小写的 ...

  9. CentOS安装docker-compose

    一.compose简介 compose是一个定义和运行多容器的docker应用的工具.compose 通过yaml文件配置应用服务,然后仅需一个命令就可以创建和运行所有配置中的服务. 二.compos ...

  10. 关于python内open函数encoding编码问题

    自己学python的open函数时,发现在pycharm里新建一个file_name.txt文本文件,输入中文保存.再用open(file_name,'r+')打开,再去读写时出现了一些问题.再三控制 ...