表格插件之一datatables

datatables的基础使用

引入css文件dataTables.bootstrap.css

引入js插件dataTables

引入js文件:jquery.dataTables.js,dataTables.bootstrap.js

Js调用:

$(".dataTables-example").dataTable();

html部分:

展示效果如下,功能都能操作

但是一般我们不需要按条分页还有搜索,只需要分页,我们可以配置相关参数

例如 去掉排序:

 $(".dataTables-example").dataTable(
                {
                    "ordering": false,
                    "searching": false
                }
        );

去掉搜索

$(".dataTables-example").dataTable(
         {
         "ordering": false,
         "searching": false,
         "lengthChange": false
         }

这样上面图片就只有分页了。

ajax 异步取数

  参数是ajax,相信大家不陌生,用过jQuery的人对这个应该很熟悉。dt是基于jquery做的表格插件,所以dt在读取数据时也用了jquery的ajax,虽然是类似,但是有加强,下面看ajax的用法吧。 基本语法:

js 调用:

  $("#example").DataTable({
            ajax:"dada.json",
            colunms:[
                {data,"name"},
                {data,"age"}
            ]
        });

json部分是:

{
	"data":[
    	{
        	"name":"datatable中文网","age":"2"
        },
        {
        	"name":"datatable中文网","age":"3"
        }

    ]
}

js 调用可以更简单:

$("#example").DataTable({
            ajax:"dada.json"
         });

json 使用数组格式

{
  "data":[
    	      ["name":"datatable中文网","age":"2"],
              ["name":"datatable中文网","age":"3"]
          ]
}

  

如果想让表格头部固定高度可以增加配置参数

scrollY: "300px"  300px 是自己自定义的数

Datatables更多应用

配置参数:http://datatables.club/reference/option/

时间: 2024-10-10 07:02:52

表格插件之一datatables的相关文章

(原)jq表格插件dataTables的一些总结(一)

jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序.浏览器分页.服务器分页.筛选.格式化等功能.dataTables 的网站上也提供了大量的演示和详细的文档进行说明,官网网站是http://www.datatables.net/,参考的网址还有DataTables中文网http://dt.thxopen.com/.这段时间因为需要用表格在前台显示数据,所以接触到dataTables,上网查资料发现网上的资料都比较老,所以想将自己最近用到的dataTables的

Datatables快速入门开发--一款好用的JQuery表格插件

博主是一个java后端程序员小白,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jquery表格插件,上手很快,重点是超级好用,有完善的中文文档,今天有空,整理一下Datatable的一些使用方法及注意事项,以便随时查阅. DataTables支持的功能: 1.分页,只需要返回符合规范的数据类型,Datatable能帮我们实现好用的分页,同时支持排序,和即时搜索. 2.丰富的数据源的

jquery DataTables表格插件的使用(网页数据表格化及分页显示)

DataTables - 非常强大的 jQuery 表格插件,可变宽页码浏览,现场过滤. 多列排序,自动探测数据类型,智能列宽,可从几乎任何数据源获取数据. 那么在Bootstrap下如何使用DataTables: 只需要在html或ejs下引用写好的样式表css和脚本文件js,对应代码如下: 1 <head> 2 <link href="http://apps.bdimg.com/libs/bootstrap/3.0.3/css/bootstrap.min.css"

datatables 前端表格插件 增删改查功能

官方网站:http://datatables.club/example/<!-- DataTables CSS -->css引入的<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css"> <!-- jQuery --><script type="

001_ jQuery的表格插件dataTable详解

一. 1.启用id为"datatable1"标签的html的表格jQuery库 $("#datatable1").dataTable( ) Reference: http://www.w3school.com.cn/jquery/jquery_syntax.asp https://datatables.net/  #官网 http://datatables.club/example/diy.html   #自定义表格插件的重要demo 原文地址:https://ww

基于JQuery的可拖动列表格插件TadaTables

前言 最近项目中在使用能够拖动列调整列位置顺序的表格插件---TadaTables,这也是目前我找到的唯一一种存在有这种功能的插件. 在查找使用方法的过程中发现可用案例并不多,且大多言语不详.本文将全面介绍此插件的使用过程. 如果不是有拖动列调整列位置顺序的需求,建议不要使用此插件,坑点较多.后面有事件我写一个名为Bootstrap-table表格插件的使用方法,使用起来比这个插件强多了 正文 英文官网:https://datatables.net/ 中文官网:http://www.datata

bootstrap-table表格插件获取分页参数

bootstrap-table是一款非常优秀表格插件,因为本人初次使用,还不是很熟悉,在使用的过程中遇到了一些问题,遂记录在此与大家分享. 插件的使用最重要是配置参数,表格插件更重要的是分页,所以这里有几个很重要的参数大家一定要注意: 1.一般分页都是在服务器端分页,所以 sidePagination : "server", 2.页数和页面大小 pageNumber : 1, //初始化加载第一页,默认第一页 pageSize : 10, //每页的记录行数(*) 3.查询参数类型,默

15 个最佳的 jQuery 表格插件

现如今,网站开发设计的需求会要求自动适应所有移动设备,即响应式网站: 在开发网站时必须考虑对平板设备融合 fluid(流)和自适应性特点. 大多数网站设计要靠margins, guides, rows and columns等网格系统和布局来在网页上组织内容.网格设计常见于报纸和杂志中的文字图像排版设计. 可以创建网格布局的数量几乎是无限的,并且能够用无数种方式排布.比如:在等间距的两列,三列或者四列网格顶端有一个横跨的header,或者一整页的有着同样外观和感觉的方格. 有一些很好的JQuer

web多终端开发学习系列(三)--- 基于bootstrap的表格插件bootstrap-table

基于网页管理系统的开发大多数功能只是对数据的显示与操作,对于数据的显示一般都是通过table表格来显示,所以管理系统的开发很有必要引入表格插件,对于sencha touch等商业化框架,都有自己自带的表格控件,而对于bootstrap需要引入第三方的表格插件,这里我学习下bootstrap table. 介绍 bootstrap table是基于bootstrap框架的一个表格插件,官网地址是http://wenzhixin.net.cn/p/bootstrap-table/docs/index