美文网首页
Jquery DataTables 自定义布局

Jquery DataTables 自定义布局

作者: hnscdg | 来源:发表于2018-07-23 16:26 被阅读0次
$(document).ready(function() {
    $('#example').dataTable({
    "sDom": '<"top"iflp<"clear">>rt<"bottom"ilp<"clear">>'
    });
});

//自定义布局

  • l - Length changing
  • f - Filtering input
  • t - The table!
  • i - Information
  • p - Pagination
  • r - pRocessing
  • < and > - div elements
  • <"class" and > - div with a class
//语法结构
/*
    <> 表示一个闭合DIV
    例:<> = <div></div>
     
    <"类名称"> 表示一个带类名称的闭合DIV
    例:<"top"> = <div class="top"></div>
     
    l - 每行显示的记录数
    f - 搜索框
    t - 表格
    i - 表格信息
    p - 分页条
    r - 加载时的进度条

//综合应用
    例:<"top"iflp<"clear">>rt<"bottom"ilp<"clear">>
    表示
    <div class="top">
        表格信息(i)
        搜索框(f)
        每行显示的记录数(l)
        分页条(p)
        <div class="clear"></div>
    </div>
    加载时的进度条(bottom)
    表格(t)
    <div class="top">
        表格信息(i)
        每行显示的记录数(l)
        分页条(p)
        <div class="clear"></div>
    </div>

相关文章

网友评论

      本文标题:Jquery DataTables 自定义布局

      本文链接:https://www.haomeiwen.com/subject/mhyjmftx.html