Datatable基础应用

一直听说DataTable插件很好用，但自己一直从来没用过，因为文章列表都用了Django内置的分页之类的。但最近自己在优化个人控制界面的时候，觉得还是尝试一下datatable。用完之后就一个感觉：“DataTable太特么好用了，简直爽到爆。”

使用方法：

1、首先引入JS和CSS文件 

JS：
<script src="/static/jquery/jquery-2.1.3.min.js"></script>
<script src="/static/js/jquery.dataTables.min.js"></script>

因为DataTable是基于JQuery的，因此jQuery的脚本是必须有的，且必须在前面，因为加载是有顺序的。 

CSS：
 <link rel="stylesheet" type="text/css" href="/static/css/jquery.dataTables.css">

2、HTML的编写

也就是你要写入数据的table标签。 

<table class="table table-hover" id="datatable">
    <thead>
        <tr>
            <th>标题</th>
            <th>作者</th>
            <th>发表时间</th>
            <th>访问量</th>
        </tr>
    </thead>

    <tbody id="tbody-result">
    </tbody>
</table>

3、JS编写

该脚本就是控制你如何导入数据。我采用了ajax导入数据源，即异步加载的方式，其实例子在官方文档中已经很清楚了。 

$(document).ready(function() {
    $('#datatable').DataTable( {
         "language": {
        "sProcessing": "处理中...",
        "sLengthMenu": "显示 _MENU_ 项结果",
        "sZeroRecords": "没有匹配结果",
        "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
        "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
        "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
        "sInfoPostFix": "",
        "sSearch": "搜索:",
        "sUrl": "",
        "sEmptyTable": "表中数据为空",
        "sLoadingRecords": "载入中...",
        "sInfoThousands": ",",
        "oPaginate": {
            "sFirst": "首页",
            "sPrevious": "上页",
            "sNext": "下页",
            "sLast": "末页"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    },
        "ajax": '/dashboard/articlelist/',
        "columns": [
            { "data": "title" },
            { "data": "alias" },
            { "data": "author" },
            { "data": "read_times" }
        ]
    } );
} );

如果会JQuery语法的话，就很好理解。language键值是将英文汉化了，可忽略。ajax键值是获取数据源的URL。这个要你自己编写代码，写你传递数据的逻辑，注意，该URL返回的应该是一个Json数据。我的是Django中的代码: 

def articlelist(request):
    user = request.user
    if user.is_superuser != 1:
        article_list =  Article.objects.filter(author=user.id,status=0).order_by('pub_time')
    else:
        article_list =  Article.objects.filter(status=0).order_by('pub_time')
    articles = []
    for article in article_list:
        item = {}
        item['title'] = article.title
        item['alias'] = article.alias
        item['author'] = article.author.username
        item['read_times'] = article.read_times
        #item['pub_time'] = article.pub_time.strftime('%Y-%m-%d')
        articles.append(item)

    return JsonResponse({'data':articles})

columns定义了数据的格式，也就是要插入到table中的一个顺序。

因此服务器传递的数据应该是下面的格式: 

{"data": 
    [
        {"alias": "blogintroduce", "author": "\u738b\u6d77\u6ce2", "read_times": 150, "title": "\u7f51\u7ad9\u4ecb\u7ecd"}, 
    ]
}

data是必须存在的，DataTable会自动获取data键值的数据。

示意图：

如图，该图可实现分页，可搜索。可以设置每页不同的显示数目。此外，点击标题可实现排序，如点击阅读量，可按照阅读量进行排序。

上面介绍的知识DataTable的基础应用，它还有很多比较实用的功能。

1、设置排序；
2、post参数，让服务器返回数据，刷新table。这应该是最实用的功能。
3、将DataTable的数据自动导出。

后续将上面提到的完善了。

--------EOF---------
微信分享/微信扫码阅读