表格插件datatables

最新推荐文章于 2020-07-31 15:55:52 发布

weixin_30608503

最新推荐文章于 2020-07-31 15:55:52 发布

阅读量114

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/konglingxi/p/10131512.html

版权

具体用法查看官网 https://datatables.net/

{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试DataTable插件</title>
    {#需要引入js、css文件#}
    <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
    <script src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="myTable" class="display">
    <thead>
    <tr>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Extn</th>
        <th>Start date</th>
        <th>Salary</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>
</body>
</html>
<script>
    $(document).ready(function () {
        var data = [
            {
                "name": "Tiger Nixon",
                "position": "System Architect",
                "salary": "$3,120",
                "start_date": "2011/04/25",
                "office": "Edinburgh",
                "extn": "5421"
            },
            {
                "name": "Garrett Winters",
                "position": "Director",
                "salary": "$5,300",
                "start_date": "2011/07/25",
                "office": "Edinburgh",
                "extn": "8422"
            }
        ]
        $('#myTable').DataTable({
            /*
            "ajax": { //ajax请求
                "url": "", // 请求数据url
                "type": "POST", // 请求方法
                "data": function (d) { // 请求参数
                    return $.extend(false, {}, d, {})
                }
            },
            */
            "data": data,
            "aoColumns": [
                {
                    'sWidth': "20%",
                    "mDataProp": "name",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                        console.log(nTd);
                        console.log(sData);
                        console.log(oData);
                        console.log(iRow);
                        console.log(iCol);
                    }
                },
                {
                    'sWidth': "20%",
                    "mDataProp": "position",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {

                    }
                },
                {
                    'sWidth': "20%",
                    "mDataProp": "salary",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {

                    }
                },
                {
                    'sWidth': "20%",
                    "mDataProp": "start_date",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {

                    }
                },
                {
                    'sWidth': "10%",
                    "mDataProp": "office",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {

                    }
                },
                {
                    'sWidth': "10%",
                    "mDataProp": "extn",
                    "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {

                    }
                },
            ],
            select: {
                style: 'multi'
            },
            fnDrawCallback: function (oSettings) { //ajax回调
                {#var json = jQuery.parseJSON(oSettings.jqXHR.responseText);#}
            }

        });
    });
    {# 测试$.extend(false, {}, d, {}) #}
    $(document).on("click",function () {
        var ext = $.extend(true,{"name":"klx"},{"name":{"klx":"klx","hrr":"hrr"}});
        console.log(ext);
    })
</script>

转载于:https://www.cnblogs.com/konglingxi/p/10131512.html

weixin_30608503

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格插件datatables

具体用法查看官网 https://datatables.net/{% load staticfiles %}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>测试DataTable插件</title>...
复制链接

扫一扫