美文网首页
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