Got dataTables



dataTables的jQuery中功能非常强大的插件。 下面是我学习和使用过程中整理的笔记。

data:该字段是展示数据的重要字段。有3中形式:

  • data: “columnName”
  • data: function()函数:这时会显示return中的字符串内容,可以通过该函数使用一些比较通用的字段。
  • defaultContent: 用来显示默认的信息,当然,可以用“data:column”替换掉。

row().draw(false);

false表示在当前页重绘,如果是在第3页,则重绘后也是在第3页。 但是使用ture或默认使用row().draw()时,会全局重绘。

Also shown is the row().remove()DT method which will delete a row from a table, and the draw()DT method with false as its first parameter. This will redraw the table keeping the current paging (without the false parameter the paging would be reset to the first page). —-API/Row selection and deletion (single row)

“createdRow”和”rowCallback”

这是dataTable()下的属性,是一个回调函数,该行加载完后会执行该函数。

这在给当前行的内容添加事件等功能会非常有帮助。今天给添加点击事件时就出现了错误,导致调试了一整天。我想实现点击dataTables中的“返回”按钮将改行隐藏。我当初写的是,在点击“待办列表”时,显示datables中的数据,但是因为需要查找数据库才能显示,导致没有及时显示出来,自然,想要添加的事件因为没有找到载体要授予失败,所以出现了下面的情况:第一次点击“返回”没有效果,改行并不消失,点击第二次才能实现想要的消失操作。这显然是js的异步功能在作怪。这时,这要将删除改行的功能添加到createdRowrowCallback中,即可实现想要的功能。

添加自定义工具栏

有时为了方便操作datatables,经常需要在dataTables的周围添加一些额外的控件,但考虑到控件与dataTables的美观,需要将控件放置在dataTables的正上方与其“搜索栏”平行,这时就要用到dataTables提供的自定义标签了。

$(document).ready(function() {
    $('#example').dataTable( {
        "dom": '<"toolbar">frtip'
    } );
    $("div.toolbar").html('<b>Custom tool bar! Text/images etc.</b>');
} );

详细参见:http://www.datatables.net/examples/advanced_init/dom_toolbar.html

 

隐藏头部属性字段和动态显示DataTables

工作的时候遇到过一个问题,一个页面分为左右两个部分,在点击左侧部分的相关链接时,右侧显示dataTables,也就是说在没有点击左侧相关链接或不应该显示dataTabls时,右侧部分已经写死的table的头部属性信息是不应当显示的。这时我们可以将默认显示方式为display:none,在需要显示时使用jQuery的css方式动态添加显示方式。

还有一个问题,如果右侧页面已经生成一个dataTable时,如果再使用相同位置(id)显示其他dataTables,这时我们可以在进入程序以前清理以下dataTables。

[c]
$(‘#dataTables’).DataTable().destroy();
[/c]

如果需要,我们也可以在清楚dataTables前判断是否含有dataTables。完整代码如下

[c]
$(‘#dataTables’).css("display", "table");
if ( $.fn.dataTable.isDataTable(‘#dataTables’ )) {
$(‘#dataTables’).DataTable().destroy();
}
var table = $(‘#dataTables’).DataTable({
}
);
[/c]

 


分享到:

发表评论

昵称

抢个沙发呗~~~