黑马在线教育项目---15-16、datatables插件

一、总结

一句话总结:

datatables插件也比较好用,引入好插件的js和css后,核心代码也就是插件的初始化,如果要修改配置可以百度

1、datatables插件的两种形式?

客户端分页方式、服务端分页方式(limit),区别在于前者是一次性从服务端获取数据

客户端分页:优点是当数据量少的时候,其速度是比较快的,其所有的操作都在客户端完成;但是如果数据量大的话,则加载的时候会很慢。

服务端分页:优点是当数据量大的时候,由于每次都是通过limit限制输出记录,所以其速度基本不受影响;但是如果数据量少的时候则服务器的压力相对较大。

后期在做datatables分页的时候可以根据数据量来选择是使用客户端还是服务端分页。

2、datatables插件核心操作?

初始化DT插件:$(选择器).dataTable(); 就这一句

二、使用datatables插件实现列表的无刷新分页

Datatables插件是一款基于jQuery框架进行开发的无刷新分页插件,其除了分页还有排序、搜索等功能。

官网:https://www.datatables.net/

该分页插件有2种形式:客户端分页方式、服务端分页方式(limit

客户端分页:优点是当数据量少的时候,其速度是比较快的,其所有的操作都在客户端完成;但是如果数据量大的话,则加载的时候会很慢。

服务端分页:优点是当数据量大的时候,由于每次都是通过limit限制输出记录,所以其速度基本不受影响;但是如果数据量少的时候则服务器的压力相对较大。

后期在做datatables分页的时候可以根据数据量来选择是使用客户端还是服务端分页。

2.1、使用客户端分页方式实现分页

使用步骤:

①先在确保引入jQuery之后,再去引入datatables的JavaScript文件;

         ②需要初始化datatables插件

③【可选】databtables支持一些扩展的配置

①引入对应的文件

②初始化DT插件

语法:$(选择器).dataTable();

③【可选】针对当前的情况来进行一些配置

a. 禁用掉第一列(复选框)排序

b. 更改默认的初始化排序操作

提示:后期需要用到这些配置项代码,不建议去记忆,用的时候直接百度搜索即可。

实现效果:

转载于:https://www.cnblogs.com/Renyi-Fan/p/11610538.html

黑马在线教育项目---15-16、datatables插件相关推荐

  1. 黑马在线教育项目---5、使用填充器创建数据库数据

    黑马在线教育项目---5.使用填充器创建数据库数据 一.总结 一句话总结: ①创建填充器文件:#php artisan make:seeder ManagerTableSeeder ③执行填充器文件: ...

  2. (在线教育)项目总结

    一.在线教育项目功能点(B2C) 1.后台管理系统 1.登录功能(SpringSecurity框架) 2.权限管理功能 (1)菜单管理 列表.添加.修改.删除 (2)角色管理 * 列表.添加.修改.删 ...

  3. 在线教育项目02_前端知识(es6、vue)

    在线教育项目02_讲师管理模块 一.统一异常处理的另外两种情况 1.1 特殊异常(特定异常处理) 1.2 自定义异常处理 二.统一日志处理 1.Logback日志工具 三.ECMAScript 6.0 ...

  4. 在线教育项目_整体介绍

    在线教育项目_整体介绍 一.项目的背景 二.商业模式 2.1 B2C(该项目的模式) 2.2 B2B2C(商家到商家到用户) 3.功能模块 3.1 系统后台 3.2 系统前台 4.项目使用到的技术 4 ...

  5. 在线教育项目04_讲师管理前端开发

    在线教育项目04_讲师管理前端开发 一.登录功能(临时) 跨域问题 框架使用的过程 二.前端讲师开发 1.讲师列表 2.讲师列表添加分页 3.讲师列表条件查询实现 4.讲师列表删除功能 5.讲师列表删 ...

  6. Java在线教育项目 第一天项目介绍和工程搭建

    第一章 项目介绍和工程搭建 学习目标 熟悉移动端应用系统的架构设计 熟悉大型软件系统设计中的各种图形结构 熟悉数据库分库分表设计技巧 熟悉Spring boot2.0+JavaConfig项目封装配置 ...

  7. SpringBoot在线教育项目(十一)

    在线教育(十一) 一.服务端渲染技术NUXT-初始化NUXT 一.服务端渲染技术NUXT 二.NUXT环境初始化 三.幻灯片插件 二.首页静态效果整合和NUXT路由 一.页面布局 二.路由 三.封装a ...

  8. 在线教育项目技术笔记2

    文章目录 一.对象存储OSS 1.阿里云OSS控制台使用 2.阿里云OSS开发准备 3.实现代码上传文件到阿里云OSS 二.nginx 1.nginx的启动安装 2.nginx配置项目请求转发 三.e ...

  9. Django——在线教育项目总结

    项目简介 在线教育平台 软件依赖: WEB框架:Django(1.11.7).Django REST framework 前端框架:Vue(2.5.16) 数据库: MySql.redis 支付平台: ...

最新文章

  1. 对话AI大师Bengio:AI不应变成军备竞赛
  2. jQuery中的$el是什么意思
  3. swal如何加入html语言,Sweet Alert弹窗点击确定后执行页面跳转等操作
  4. 结合领域驱动设计的SOA分布式软件架构
  5. [css] 说说display:none和visibility:hidden的区别
  6. 动态度量 linux,动态可信度量.ppt
  7. 盘点 Greenplum 数据库的十大特点
  8. TriCore处理器的上下文切换原理
  9. 为什么你的支付宝芝麻信用分就是不涨?
  10. 1900页Python系列PPT分享三:选择与循环结构语法及案例(96页)
  11. ActiveMQ学习总结(7)——ActiveMQ使用场景
  12. snort配置文件中的PORT解析
  13. 工业互联网联盟发布工业物联网安全框架
  14. L2-025 分而治之-PAT团体程序设计天梯赛GPLT
  15. IEEE ACCESS 模板中字体颜色与caption包冲突解决办法
  16. 移动通信USSD业务探讨(转)
  17. 田申:《个人信息安全规范》的理解与初探
  18. gavin中文是什么意思_Gavin[加文,盖温]英文名的中文翻译意思、发音、来源及流行趋势-千代英文名...
  19. 扒皮下音悦台的“返回顶部”图标效果
  20. MySQL【数据类型】

热门文章

  1. 解决Asp.net中的Chart控件运行出现错误提示“ ChartImg.axd 执行子请求时出错”
  2. ProGit-读书简记
  3. 生成学习算法Generative Learning algorithms
  4. 小心Redis漏洞让你服务器沦为肉鸡
  5. 基于单目视觉的智能车辆视觉导航系统设计
  6. Android中shape的使用
  7. 键桥通讯布局大数据 9.45亿入股上海即富
  8. ubuntu16禁用utc时间
  9. 如何让PhpStorm同时打开多个项目?(多项目并存的问题)
  10. 搭建自己的前端自动化测试脚手架(三)