点这里进入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. Docker 镜像与容器

    镜像和容器的关系   容器提交    commint 作用:       根据容器生成一个新的镜像        命令格式:       docker commit [OPTIONS] CONTAIN ...

  2. flutter 侧滑删除+侧滑显示删除按钮

    1.侧滑删除 1.1.Dismissible组件 2.侧滑显示删除按钮 2.1.手势监听水平滑动 ------------------------------------分割线------------ ...

  3. [转]uipath team svn

    本文转自:https://docs.uipath.com/studio/docs/svn-version-control SVN Version Control Suggest Edits Openi ...

  4. Linux加密known_hosts文件中的IP

    如何加密known_hosts中的IP地址 很多挖矿会去自动匹配known_hosts文件中的IP地址,然后尝试免密登录,进一步感染更多的主机,所以对该文件进行加密可以阻止这一点. 修改 /etc/s ...

  5. Django—使用后台管理Models

    后台的配置 1.创建后台管理员 [root@localhost study_django]# python manage.py createsuperuser [root@localhost stud ...

  6. java8-01-初识Lambda表达式

    为什么用 Lambda表达式          在java8之前  java语言 方法调用  无法将函数作为一个参数      也无法声明返回一个函数          对比 javaScript是典 ...

  7. 0day2安全——笔记2

    第二章 内存的不同用途 windows应用—>编译连接—>PE文件—>进程 进程使用的内存 1.代码区:储存着被装入执行的二进制机器代码,处理器会到这个区域取指和执行 2.数据区:用 ...

  8. VIJOS-P1167 南蛮图腾

    洛谷 P1498 南蛮图腾 洛谷传送门 JDOJ 1325: VIJOS-P1167 南蛮图腾 JDOJ传送门 Description 自从到了南蛮之地,孔明不仅把孟获收拾的服服帖帖,而且还发现了不少 ...

  9. 浅谈状态压缩DP

    浅谈状态压缩DP 本篇随笔简单讲解一下信息学奥林匹克竞赛中的状态压缩动态规划相关知识点.在算法竞赛中,状压\(DP\)是非常常见的动规类型.不仅如此,不仅是状压\(DP\),状压还是很多其他题目的处理 ...

  10. LG5196 「USACO2019JAN」Cow Poetry 背包+乘法原理

    \(\mathrm{Cow Poetry}\) 问题描述 LG5196 题解 因为每句诗的长度一定是\(k\),所以自然而然想到背包. 设\(opt[i][j]\)代表到第\(i\)位时,结尾为\(j ...