datatables的基本用法
程序员文章站
2022-04-27 22:23:07
datatables的基本用法
id
name
score
001
zhang
98
002
wang
99
简单调用一句话(使用默认设置),就可以使table具...
datatables的基本用法
id | name | score |
---|---|---|
001 | zhang | 98 |
002 | wang | 99 |
简单调用一句话(使用默认设置),就可以使table具有排序,查找,分页的基本功能。
$(function () { $("#table1").datatable({ }); });服务器端分页
这种方式针对大数据量的table(10万条以上),每次只读取当前的一页数据,分页在后台做。代码相对复杂,不过页面响应更快,
服务器端的分页一般要求我们先定义thead表头,tbody可以不写。
配置参数$(function () { $("#table1").datatable({ // 是否允许检索 "searching": false, // 是否允许排序 "ordering": true, // 初期排序列 //"order": [[0,'asc'],[1,'desc']], // 是否显示情报 就是"当前显示1/100记录"这个信息 "info": false, // 是否允许翻页,设成false,翻页按钮不显示 "paging": false, // 水平滚动条 "scrollx": false, // 垂直滚动条 "scrolly": false, // 件数选择功能 默认true "lengthchange": false, // 件数选择下拉框内容 "lengthmenu": [10, 25, 50, 75, 100], // 每页的初期件数 用户可以操作lengthmenu上的值覆盖 "pagelength": 50, //翻页按钮样式 // numbers:数字 // simple:前一页,后一页 // simple_numbers:前一页,后一页,数字 // full:第一页,前一页,后一页,最后页 //full_numbers:第一页,前一页,后一页,最后页,数字 //first_last_numbers:第一页,最后页,数字 "pagingtype": "full_numbers", // 行样式应用 指定多个的话,第一行tr的class为strip1,第二行为strip2,第三行为strip3. // 第四行以后又开始从strip1循环。。。 如果想指定成斑马条状,这里的class必须指定为2个。 "stripeclasses": ['strip1', 'strip2', 'strip3'], // 自动列宽 "autowidth": true, // 是否表示 "processing" 加载中的信息,这个信息可以修改 "processing": true, // 每次创建是否销毁以前的datatable,默认false "destroy": false, // 控制表格各种信息的表示位置(比较复杂) 默认:lfrtip // 具体参考:https://datatables.net/reference/option/dom "dom": 'lrtip', "language": { "processing": "datatables is currently busy", // 当前页显示多少条 "lengthmenu": "display _menu_ records", // _start_(当前页的第一条的序号) ,_end_(当前页的最后一条的序号),_total_(筛选后的总件数), // _max_(总件数),_page_(当前页号),_pages_(总页数) "info": "showing page _page_ of _pages_", // 没有数据的显示(可选),如果没指定,会用zerorecords的内容 "emptytable": "no data available in table", // 筛选后,没有数据的表示信息,注意emptytable优先级更高 "zerorecords": "no records to display", // 千分位的符号,只对显示有效,默认就是"," 一般不要改写 //"thousands": "'", // 小数点位的符号,对输入解析有影响,默认就是"." 一般不要改写 //"decimal": "-", // 翻页按钮文字控制 "paginate": { "first": "first page", "last": "last page", "next": "next page", "previous": "previous page" }, // client-side用,server-side不用这个属性 "loadingrecords": "please wait - loading..." }, // 默认是false // 如果设为true,将只渲染当前也的html,速度会很快,但是通过api就访问不到所有页的数据,有利有弊 //"deferrender": false, // 服务器端处理方式 "serverside": true, // ajax选项 可以直接简单指定成请求的文件 //"ajax": "data.json", // 也可以用对象来配置,更加灵活 "ajax": { // url可以直接指定远程的json文件,或是mvc的请求地址 /controller/action url: "data.json", type: 'post', // 传给服务器的数据,可以添加我们自己的查询参数 data: function (param) { param.opportunityno = $('#txtsearch').val(); return param; }, //用于处理服务器端返回的数据。 datasrc是datatable特有的 datasrc: function (myjson) { if (myjson.timeout) { return ""; } return myjson; } }, //指定用于行id的属性名 默认是:dt_rowid "rowid": 'staffid', // 列定义 "columns": [ { // data 可以是属性名,或嵌套属性(worktm1.id),数组arrone[,] 用中括号中的字符连接数组后返回。 "data": "worktm1", // 这里的class会应用到td上面 "classname": "dt-body-right", // 列宽 "width": 40, // 很灵活,描绘每个单元格 // data:当前cell的data,这个data和type有关 // type:filter,display,type,sort // row:当前行数据 // https://datatables.net/reference/option/columns.render "render": function (data, type, row, meta) { return type === 'display' && data.length > 40 '' + data.substr(0, 38) + '...' : data; }, // 是否可排序 默认值:true "orderable": true, // 指定当前列排序操作的时候,用哪一列(几列)的数据进行真正的排序(通常是隐藏的) "orderdata": [0, 1], // 这个属性 和type属性相似,指定排序时候这一列该怎么转换数据, //需要用到其他的插件 详细: https://datatables.net/plug-ins/sorting/ "orderdatatype": "dom-text", // 是否显示当前列 默认值:true "visible": false, // 是否允许搜索此列 默认值:true "searchable": false, //这个属性仅client-side有效, server-side在服务器端排序 //主要用于排序和筛选,指定当前列作为什么类型进行解析 //内置值:date,num,num-fmt,html-num,html-num-fmt,html,string // 还可以用其他插件提供的类型 :详细: https://datatables.net/plug-ins/sorting/ // 有html开头的,都会讲html标签先移除后进行数据处理 "type": "html", // 列头文字,如果没有指定thead,则会生成。如何指定了thead,则会覆盖当前列头文字 "title": "my column title", // defaultcontent:默认值,属性值为null或undefined就会用这个值 "defaultcontent": "not set", // 单元格类型:"th","td" "celltype" : "td", // 单元格创建完后的回调,可以作为render的补充 // cell:td的dom // celldata:原始的单元格数据,如何render中进行了格式化,用$(cell).html()来取格式化后的数据 // rowdata:行数据 // row:行号 // col:列号 "createdcell": function (cell, celldata, rowdata, row, col) { if ( celldata < 1 ) { $(td).css('color', 'red') } } }, { "data": "worktm2", "classname": "dt-body-right", "width": 40 }, { "data": "worktm3", "classname": "dt-body-right", "width": 40 }, { "data": "worktm4", "classname": "dt-body-right", "width": 40 }, { "data": "restday1", "classname": "dt-body-right", "width": 40 }, { "data": "restday2", "classname": "dt-body-right", "width": 40 }, { "data": "restday3", "classname": "dt-body-right", "width": 40 }, { "data": "restday4", "classname": "dt-body-right", "width": 40 }, { "data": "restday5", "classname": "dt-body-right", "width": 40 } ], // 和上面的columns类似,columns可以定义的属性,都可以在这里定义, // 另外增加targets属性用于指定列范围(可以多列) // 优先级:上面的columns高于columndefs columndefs: [ { targets: [0, 2], render: function (data, type, row, meta) { if (type === 'display') { var ctemp = $(".dayinfo").children().eq(meta.col).attr("class"); var cname = ctemp ctemp : ""; var readonly = $(".dayinfo").children().eq(meta.col).attr("data-fixed") == "fixed" "readonly" : ""; return '<input type="input" class="form-control dt-body-center ' + cname + '" '="" +="" readonly="" value="' + data + '">'; } return data; }, }], // 每一行创建完调用的函数 "createdrow": function (row, data, dataindex) { // row : tr dom // data: row data // dataindex:row data's index if (data[4] == "a") { $(row).addclass('important'); } }, // 每一行被创建,但还没有被加载到document中,这个函数优先于createdrow // 个人觉得用createdrow更好 "rowcallback": function (row, data, index) { // row : tr dom // data: row data // index:row data's index if ( data[4] == "a" ) { $('td:eq(4)', row).html( 'a' ); } }, //thead被描画后调用 "headercallback": function (thead, data, start, end, display) { //thead:dom, data:原始的datatable数据,display:当前显示排序好的datatable数据(有可能经过排序) // start end :当前dispaly数据的开始结束序号 $(thead).find('th').eq(0).html( 'displaying '+(end-start)+' records' ); }, // tfoot被描画后调用,通常可用于计算合计值 "footercallback": function (tfoot, data, start, end, display) { //tfoot:dom, data:原始的datatable数据,display:当前显示排序好的datatable数据(有可能经过排序) // start end :当前dispaly数据的开始结束序号 var api = this.api(); $( api.column( 5 ).footer() ).html( api.column( 5 ).data().reduce( function ( a, b ) { return a + b; }, 0 ) ); }, // 初始化,描画都已经完成,常用于ajax "initcomplete": function( settings, json ) { $('p.loading').remove(); }, // 每次datatable描画后都要调用,调用这个函数时,table可能没有描画完成, // 所以不要在里面操作table的dom,要操作dom应放在initcomplete "drawcallback": function( settings ) { var api = this.api(); // output the data for the visible rows to the browser's console console.log( api.rows( {page:'current'} ).data() ); }, // 这个函数可以改写数字的格式化方式 // 默认datatable用 language.thousands来解析数字,“,” "formatnumber": function ( toformat ) { return toformat.tostring().replace( /\b(=(\d{3})+(!\d))/g, "'" ); } }); });服务器端的参数
// 发送到服务器端的数据 // draw:计数器,返回数据的时候用这个值设定 // start:开始记录(0 besed index) // length:每页条数 // search[value]:检索文字 // order[i][column]:int 排序列的序号 例如:2,代表第3列排序 i代表有几个排序,一个的话服务器端这样写“order[0][column]” // order[i][dir]:排序的方式"desc","asc" // 下面comuns中的i取值从0~columns.length,所有的columns信息都发送到了服务器 // columns[i][data]:columns上定义的data属性值 // columns[i][name]:columns上定义的name属性值 // columns[i][searchable]:列能不能检索 // columns[i][orderable]:列能不能排序 // columns[i][search][value]:列的检索值 string // 服务器返回的数据 // draw:和request的draw设定成一样的值 // recordstotal:所有的总件数 // recordsfiltered:筛选后的总件数 // data:返回的数据 // 每一行数据上面,可以包含这几个可选项 // dt_rowid:加在行上的id值 // dt_rowclass:加在行上的class // dt_rowdata:加在行上的额外数据(object) // dt_rowattr:加在行上的属性(object) // error:如果有错误,就设定这个值,没有错误,不要包含这个值datatable常用事件
//常用事件 // init:初始化和数据都加载完成,和 initcomplete配置等价 $('#example') .on('init.dt', function () { console.log('table initialisation complete: ' + new date().gettime()); }) .datatable(); // error:处理数据出错 errmode必须为“none”,才会触发error事件 $.fn.datatable.ext.errmode = 'none'; // alert,throw,none, a function $('#example') .on('error.dt', function (e, settings, technote, message) { console.log('an error has been reported by datatables: ', message); }) .datatable(); // xhr:ajax加载数据完成后调用,这时数据并没有被描画,等价于 ajax.datasrc $('#example') .on('xhr.dt', function (e, settings, json, xhr) { for (var i = 0, ien = json.aadata.length ; i < ien ; i++) { json.aadata[i].sum = json.aadata[i].one + json.aadata[i].two; } // note no return - manipulate the data directly in the json object. }) .datatable({ ajax: "data.json" });datatable常用api
//全部参考 https://datatables.net/reference/api/ // 1,获取api的方式 // 注意 $(selector).datatable()得到的是table的jquery对象 // 而api对象只能通过:api.$(select) 返回查找到的jquery对象。 $(selector).datatable(); $(selector).datatable().api(); new $.fn.datatable.api(selector); // 2,得到一个api对象 var table = $('#example').datatable(); //3,描画 draw( [paging] ) 取值:true 全部重画,false 全部重画(保持当前的页面), // "page" 不重取数据,只描画当前页 $('#myfilter').on('keyup', function () { table.search(this.value).draw(); }); // sort by column 1 and then re-draw table.order([[1, 'asc']]).draw(false); table.page('next').draw('page'); // data() 获取全表数据 // increment a counter for each row table.data().each(function (d) { d.counter++; }); // 4,column().data() 获取列数据 // cloumn的第一个参数 可以是序号,或jquery支持的选择器 // cloumn的第二个参数 是一个 selector-modifier 对象,取值如下 //{ // // datatables core // order: 'current', // 'current', 'applied', 'index', 'original' // page: 'all', // 'all', 'current' // search: 'none', // 'none', 'applied', 'removed' // // extension - keytable (v2.1+) - cells only // focused: undefined, // true, false, undefined // // extension - select (v1.0+) // selected: undefined // true, false, undefined //} table.column(3, { order: 'current' }).data(); //5,row().data() 获取行数据 $('#example tbody').on('click', 'tr', function () { console.log(table.row(this).data()); }); // 6,row().node() 获取行dom对象 $(table.row('#row-4').node()).addclass('ready'); // 7,row().remove(); 删除当前行 table.row('#row-4').remove(); // 8, row.add() 加一行数据 // rows.add() 加多行数据 table.row.add({id:"1",name:"li"}); // 9, table().body() 获取tbody dom 对象 // table().header() 获取theader dom 对象 // table().footer() 获取tfooter dom 对象 // table().node() 获取table dom 对象 $(table.table().footer()).addclass('highlight'); // 10,destroy() 销毁table true:连同html一起销毁 table.destroy(false) // 11,on 绑定table的事件 table.on('xhr', function (e, settings, json) { console.log('ajax event occurred. returned data: ', json); }); // 12,page.len(10) 设置一页显示的条数 $('#_10').on('click', function () { table.page.len(10).draw(); });
转载自 https://www.cnblogs.com/xiashengwang/p/8087181.html
上一篇: 鸡茸蕨菜这样做,味道鲜美营养价值还高
下一篇: 述律平是什么样的人?女人也要心狠手辣