学习HTML5(一) - jQuery Datatable学习

2024年5月6日 互联网

收集一些我关心的内容。

链接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 - 博客园

最新文章