JQuery Datatables的dom用法

 最近由于某些原因，开始研究Datatables，将日常遇到的一些困难点写出来，帮助与我一样第一次接触这款插件的使用者

Datatables DOM

 Datatables是一个基于JQuery的表格插件，利用它可以很方便的实现与用户的交互。可以点击链接访问：

• Datatables中文网-使用手册[当前已经暂停维护，但仍然可以访问]
• Datatables官网-使用手册[有时候可能会莫名其妙的无法访问]

控件

控件手册:

• Datatables中文网-dom[当前已经暂停维护，但仍然可以访问]
• Datatables官网-dom[有时候可能会莫名其妙的无法访问]

控件

• l - Length changing 改变每页显示多少条数据的控件
• f - Filtering input 即时搜索框控件
• t - The Table 表格本身
• i - Information 表格相关信息控件
• p - Pagination 分页控件
• r - pRocessing 加载等待显示信息
  
   如图所示，加载等待显示信息一般不可见，目前没研究到，暂时忽略，之后如果了解了，会进行补充。
  
   这是Datatables官方默认的控件位置，但是有时候我们会有个性化定制，比如左上角添加两个button用来进行多选或者其他什么需求，比图需要上方和下方同时显示表格information，那么这时就需要到dom option来进行定制化表格控件。
  
   首先看到上图所示，按照提供的控件简写，可以看出官方用到了’l’,‘f’,‘t’,‘i’,'p’控件，当然，还有一个’r’控件是截图上没有的，按照从左到右，从上到下的顺序，也就是dom的默认值:‘lfrtip’，这点在官方手册也能找到。那么我们能不能直接修改dom的值来进行个性化定制呢？答案肯定是可以的，那么比如我想information控件显示两次，就可以直接在需要的地方加上控件简写即可
  

定制DOM

 虽然上面短暂的实现了需求，但是不清楚是不是因为某些原因导致，我这面在调整的时候，只有上下排版了，没有左右排版，这样的效果肯定不是我想要的，而且对于我之前提的一个需求，左上角不用官方控件，而是自己编写，那么实现起来也不容易了，这样就需要用到dom的其他字符了。
 dom其他字母：

• < > - div elements 代表一个div元素
• <"#id" > - div with an id 指定了id的div元素
• <“class” > - div with a class 指定了样式名的div元素
• <"#id.class" > - div with an id and class 指定了id和样式的div元素
  
   如列表所示，我们可以使用类似于标签的方法来定制化，先看下代码及效果图：
  
  
   根据效果图来看，左上角的状态筛选和中间的批量操作都是我自己的控件，之后会执行某些功能，右侧的是自带的控件，用到了BootStrap的栅格，比较捡漏，见谅。这部分想必看的人应该都能写出来，只是简单的html和css样式，其中table是之后Datatables用来渲染表格的地方。
  
   这是我的dom定制的内容，可以看出来有很多类似于html标签的东西，这就需要用到上面的几个字符了。
  
   首先 <>这两个字符代表的是div标签，所以必然是成对存在的，哪怕出现嵌套，最后也必然需要关闭。其他的属性就有点像css选择器了，就不赘述了。
  
   然后解释下我写的dom:

1. 首先dom支持的是字符串，所以写的时候需要注意引号的闭合。
2. 字符串中控件的顺序还是如之前所言，在’t’之前的就会在table之前，也就是在要渲染表格的同级div之上，同理，在’t’之后的就是在table之后。
3. 因为我要渲染出我上图效果图的效果，所以我需要在table控件之前插入一个filtering input控件，并且位置在table右上角，所以f字符必然需要在t之前
4. <'col-sm-offset-2 col-sm-2' f>这代表是对于f控件，生成一个div标签，这个div标签的class的属性是col-sm-offset-2和col-sm-2，如果想生成一个id，直接加上#id name即可，例如<'#myTable.col-sm-offset'>。
   
   
    tips:这些控件对应的div标签不需要再HTML中写好，哪怕你写好，Datatables也会重新生成相应的标签。
    好了，就阐述到这里，我是爱空想的小菜鸟，这篇简单的博客希望能帮助到你，也希望能起到抛砖引玉的作用，当然也可能有不对的地方，希望大佬多多指教