Javascript 笔记

Javascript Note

• MDN - Object.keys()
• javascript 中的数组使用

DataTable

• datatables.net 官网

• Datatables.net – Update Ajax Interval, Reload Data, Refresh Table

• [jQuery]jQuery DataTables插件自定义Ajax分页实现

$(function () {
    //提示信息
    var lang = {
        "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": "末页",
            "sJump": "跳转"
        },
        "oAria": {
            "sSortAscending": ": 以升序排列此列",
            "sSortDescending": ": 以降序排列此列"
        }
    };

    //初始化表格
    var table = $("#example").dataTable({
        language: lang,  //提示信息
        autoWidth: false,  //禁用自动调整列宽
        stripeClasses: ["odd", "even"],  //为奇偶行加上样式,兼容不支持CSS伪类的场合
        processing: true,  //隐藏加载提示,自行处理
        serverSide: true,  //启用服务器端分页
        searching: false,  //禁用原生搜索
        orderMulti: false,  //启用多列排序
        order: [],  //取消默认排序查询,否则复选框一列会出现小箭头
        renderer: "bootstrap",  //渲染样式:Bootstrap和jquery-ui
        pagingType: "simple_numbers",  //分页样式:simple,simple_numbers,full,full_numbers
        columnDefs: [{
            "targets": 'nosort',  //列的样式名
            "orderable": false    //包含上样式名'nosort'的禁止排序
        }],
        ajax: function (data, callback, settings) {
            //封装请求参数
            var param = {};
            param.limit = data.length;//页面显示记录条数,在页面显示每页显示多少项的时候
            param.start = data.start;//开始的记录序号
            param.page = (data.start / data.length) + 1;//当前页码
            //console.log(param);
            //ajax请求数据
            $.ajax({
                type: "GET",
                url: "/hello/list",
                cache: false,  //禁用缓存
                data: param,  //传入组装的参数
                dataType: "json",
                success: function (result) {
                    //console.log(result);
                    //setTimeout仅为测试延迟效果
                    setTimeout(function () {
                        //封装返回数据
                        var returnData = {};
                        returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                        returnData.recordsTotal = result.total;//返回数据全部记录
                        returnData.recordsFiltered = result.total;//后台不实现过滤功能,每次查询均视作全部结果
                        returnData.data = result.data;//返回的数据列表
                        //console.log(returnData);
                        //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
                        //此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
                        callback(returnData);
                    }, 200);
                }
            });
        },
        //列表表头字段
        columns: [
            {"data": "Id"},
            {"data": "Name"},
            {"data": "Sex"}
        ]
    }).api();
    //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象
});

• 自定义渲染视图按钮 columns.render

• How to Add Data to Custom Content for Dynamic Table - Datatable JQuery

• columns.render

$(document).ready(function() {
     var table = $('#example').DataTable( {
        "ajax": "data/arrays.txt",
        "columnDefs": [ {
            "targets": -1,
            "data": null,
            "render": function(data, type, full, meta){
               if(type === 'display'){
                  data = '<a href="address/' + full[0] + '">Click</a>';
               }

               return data;
            }
       } ]
    } );
} );

• datatable columndefs targets

• jQuery datatables columnDefs target a name rather than index

• columnDefs

This targets property tells DataTables which column(s) the definition should be applied to. It can be:

0 or a positive integer - column index counting from the left
A negative integer - column index counting from the right
A string - class name will be matched on the TH for the column
The string "_all" - all columns (i.e. assign a default)