dataTables笔记

前段时间有项目用到了dataTables插件，感觉挺好用的，正好最近空闲时间挺多，就想把这个插件的功能学习一下，方便以后项目中快速应用。
直接开始…

• 创建行回调
  关键字：createdRow
  例子：（如果salary列的值大于某个值，就触发该回调事件）

$('#example').dataTable( {    "ajax": "ceshi3.php",    "createdRow": function(row,data,index){        if(data[5]*1>4000){            $('td', row).eq(5).css('font-weight',"bold");        }    }} );

• 自定义dom
  关键字：“dom”
  datatables定义了10个字符表示不同的组件
  
  • l - Length changing 每页显示多少条数据选项
  • f - Filtering input 搜索框
  • t - The Table 表格
  • i - Information 表格信息
  • p - Pagination 分页按钮
  • r - pRocessing 加载等待显示信息
  • < and > - div elements 一个div元素
  • <”#id” and > - div with an id 指定id的div元素
  • <”class” and > - div with a class 指定样式名的div元素
  • <”#id.class” and > - div with an id and class 指定id和样式的div元素
    例子：（dom定位，自定义dom内容）

"dom": '<"#id"and><"top"lp>rt<"bottom"if>'

• 搜索API
  关键字：“$(obj).DataTable().search().draw()”
  html部分：

<div class="table-box">    <ul class="clearfix">        <li class="clearfix" data-column = "0">            <p>First name</p>            <input type="text" class="column_filter" id="col0_filter" />        </li>        <li class="clearfix" data-column = "1">            <p>Last name</p>            <input type="text" class="column_filter" id="col1_filter" />        </li>        <li class="clearfix" data-column = "2">            <p>Position</p>            <input type="text" class="column_filter" id="col2_filter" />        </li>        <li class="clearfix" data-column = "3">            <p>Office</p>            <input type="text" class="column_filter" id="col3_filter" />        </li>        <li class="clearfix" data-column = "4">            <p>Start date</p>            <input type="text" class="column_filter" id="col4_filter" />        </li>        <li class="clearfix" data-column = "5">            <p>Salary</p>            <input type="text" class="column_filter" id="col5_filter" />        </li>    </ul></div>      

js部分：

<script>    function filterColumn(i){        $("#example").DataTable().column(i).search(            $("#col"+i+"_filter").val()        ).draw();    }    $(function(){        var table = $('#example').DataTable({            "ajax": "ceshi3.php"        });        $("input.column_filter").on("keyup click",function(){            filterColumn($(this).parents("li").attr("data-column"));        });    })</script>

• [数组数据源]显示行信息
  关键字：“row.child(format(row.data())).show();”
  js部分：

//行信息tablefunction format(d){    return "<table cellpadding='5' cellspacing='0' border='0' style='padding-left:50px'>"+        "<tr>"+             "<td>First Name:</td>"+            "<td>"+d[0]+"</td"+        "</tr>"+        "<tr>"+             "<td>Last Name:</td>"+            "<td>"+d[1]+"</td"+        "</tr>"+    "</table>";}$(function(){    var table = $("#example").DataTable({        "ajax": "ceshi3.php",  //数据源为数组格式        "columnDefs": [            {                "targets": 0,                "render": function(data,type,row,meta)                {                    return "<td>+</td>";  //为了省事用了+号，有图标的可以加一个图标                }            },            {                "targets": 1,                "render": function(data,type,row,meta)                {                    return row[0]+" / "+[row[1]]                }            },        ]    });    $("#example tbody").on("click","td.sorting_1",function(){        var $this = $(this);        var icon = $this.html();        var tr = $(this).closest("tr");        var row = table.row(tr);        if(icon == "-"){            row.child.hide();            $this.html("+");//          tr.removeClass("shown")    }    else{        row.child(format(row.data())).show();        $this.html("-");//      tr.addClass("shown")        }    });})

先写到这里，有空继续。。。