学习HTML5(一) - jQuery Datatable学习

收集一些我关心的内容。

链接1 Jquery DataTable基本使用

链接2 jquery datatable[表格处理]

[状态保存] 使用了翻页或者改变了每页显示数据数量，会保存在cookie中，下回访问时会显示上一次关闭页面时的内容。

$(document).ready(function() {
    $('#example').dataTable( {
        "bStateSave": true
    } );
} );

链接3 datatable设置成中文 - 秋风伴落叶 - CSDN博客

翻译DataTable

$('#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": ": 以降序排列此列"
       }
   }
});

链接4 DataTables-对最后一列添加按钮事件

其中包含代码

1️⃣生成DataTable

2️⃣单击行, 选中复选框

        //单击行，选中复选框
        $("#example tr").slice(1).each(function(g){
            var p = this;
            $(this).children().slice(1).click(function(){
                $checkbox = $($(p).children()[0]).children()[0];
                if($checkbox.type==="checkbox"){
                    $checkbox.checked = !$checkbox.checked;
                }
            });
        });

我的解释

找到某个表格下的每一行<tr>(数组)

第一行是标题，用slice剪掉. >>SLICE函数用法

对于每一行执行都执行函数. >>EACH函数用法

执行的函数是: 为第一个<td>之外的列添加单击事件处理函数: 为第一个<td>的孩子——复选框，执行选择或者反选的操作

jquery选择器$('selector')返回的不是数组，而是封装好的jquery对象。但这个对象有一个特别的地方，就是查询到的节点被以下标为属性，添加到了jquery对象上，所以它看起来像数组，因为它存在一些属性是数字；>>百度知道

3️⃣单击行，改变行的样式

        //单击行，改变行的样式
        $('#example tbody').on('click', 'tr', function () {    // (1)
            var id = this.id;
            var index = $.inArray(id, selected);

            if (index === -1) {
                selected.push(id);
            } else {
                selected.splice(index, 1);
            }

            $(this).toggleClass('selected');
        });

我的解释

为tbody里的每一个子元素添加click事件. >>jQuery on() 方法

this是tr这个控件, 如果this.ID在selected数组里面, 就删除第index个元素 >>JavaScript splice() 方法

否则, 把id放到selected数组中.

增删class中的"selected"类

4️⃣遍历选中行

        // 遍历选中行
        $("#example tbody tr").click(function (e) {        // (2)
            var table = $('#example').DataTable();

            var rows = table.rows('.selected').indexes();
            var data = table.rows(rows).data();
            for (var i = 0; i < data.length; i++) {
                alert(data[i][1] + "," + data[i][2]);
            }
        });

 某些注释

function(e) {} 的this是<tr>. 代码(1)和代码(2)应该是一样的

警告

注意[3]与[4]的区别，$("#example tbody tr")是静态的，只绑定当前页面中存在的tr，翻页即失效，$('#example tbody').on('click', 'tr', function () 是表格级的，翻页也有效果。

5️⃣全选/全不选

        $('#checkbox_id_all').click(function () {
            $(":checkbox:not(#checkbox_id_all)").attr("checked", this.checked);
        });

我要学会

筛选器: $(":checkbox:not(#checkbox_id_all)")

> attr设置属性, id直接设置id的值, toggleClass增删class

6️⃣修改单元格

        $('a#edit').click(function () {
            var data = $('#example').DataTable().row($(this).parents('tr')).data();
            alert("查看修改：" + data[1] + "," + data[2]);
        });

我要学会

$(this).parents('tr')  从最近的父元素向外的顺序被返回的  >>jQuery 遍历 - parents() 方法

DataTable().row()  获得指定行的数据, 返回值是Array >>row().data()

链接5 给DataTable中添加一行数据 - 小痞子Yang - 博客园