dataTables使用

$(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 = $('.table-sort').dataTable({language:lang,  //提示信息autoWidth: false,  //禁用自动调整列宽stripeClasses: ["odd", "even"],  //为奇偶行加上样式，兼容不支持CSS伪类的场合aaSorting: [[1, "desc"]],//默认第几个排序aoColumnDefs: [{"orderable": false, "aTargets": [0,1,3,4]}// 制定列不参与排序],processing: true,  //隐藏加载提示,自行处理serverSide: true,  //启用服务器端分页searching: true,  //禁用原生搜索orderMulti: true,  //启用多列排序order: [],  //取消默认排序查询,否则复选框一列会出现小箭头pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers//表格行回调函数fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {//动态设置class属性$(nRow).attr("class","text-c va-m");},ajax: function (data, callback, settings) {//封装请求参数,data为dataTables预设的参数var param = {};//页面显示记录条数，在页面显示每页显示多少项的时候param.pageSize = data.length;//开始的记录序号param.start = data.start;//当前页码param.pageNum = (data.start / data.length)+1;if(data.order[0] != undefined){param.orderColumn = data.order[0].column;param.orderDir = data.order[0].dir;}//dataTables搜索框值  DataTables_Table_0_filter为生成的搜索框的idparam.name = $("#DataTables_Table_0_filter input[type='search']").val();//ajax请求数据$.ajax({type: "POST",url: "/back/theme/getPage.do",//禁用缓存cache: false,//传入封装的参数data: param,dataType: "json",success: function (result) {$("#dataNum").html(result.total);//封装返回数据var returnData = {};returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回returnData.recordsTotal = result.total;//返回数据全部记录returnData.recordsFiltered = result.total;//后台不实现过滤功能，每次查询均视作全部结果returnData.data = result.page;//返回的数据列表//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕callback(returnData);}});},//列表表头字段columns: [{"data": null,//render改变该列样式，4个参数，data获取到的该列数据，type调用的数据类型，full该行，meta包含请求行索引，列索引等"render": function (data, type, full, meta) {return '<input name="checkBox" data-id="'+full.id+'" type="checkbox">';},},{"data": null,},{"data": "name","render": function (data, type, full, meta) {return "<a onClick=\"product_edit('版块编辑','/back/theme/toUpdate.do','"+full.id+"')\" href='javascript:void(0)'>"+data+"</a>";}},{"data": "desc","className":"left"},{ "data": null,//className设置该td的class"className":"td-manage","render": function (data, type, full, meta) {return "<a style=\"text-decoration:none\" class=\"ml-5\" onClick=\"product_edit('版块编辑','/back/theme/toUpdate.do','"+full.id+"')\" href=\"javascript:;\" title=\"编辑\">\n" +"       <i class=\"Hui-iconfont\"></i>\n" +"   </a>\n" +"   <a style=\"text-decoration:none\" class=\"ml-5\" onClick=\"theme_del(this,'/back/theme/del.do','"+full.id+"')\" href=\"javascript:;\" title=\"删除\">\n" +"       <i class=\"Hui-iconfont\"></i>\n" +"   </a>";}}]}).api();//此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象//监听draw，重绘序号列table.on('draw.dt',function() {//1代表哪一列table.column(1, {search: 'applied',order: 'applied'}).nodes().each(function(cell, i) {//i 从0开始，所以这里先加1i = i+1;//服务器模式下获取分页信息，使用 DT 提供的 API 直接获取分页信息var page = table.page.info();//当前第几页，从0开始var pageno = page.page;//每页数据var length = page.length;//行号等于 页数*每页数据长度+行号var columnIndex = (i+pageno*length);cell.innerHTML = columnIndex;});});//修改搜索框，加搜索按钮var $searchBox = $("#DataTables_Table_0_filter input[type='search']");//移除处理函数$searchBox.off();$searchBox.attr("placeholder","板块名称");// 按下enter执行搜索$searchBox.on("keyup" ,function(evtObj){if(evtObj.keyCode == 13){$(".table-sort").DataTable().search($searchBox.val()).draw();}});// 搜索框后面加按钮搜索var $btn = $("<button class='btn radius' type='button'>搜索</button>");$("#DataTables_Table_0_filter label").append($btn);$btn.click(function(evtObj){console.log($searchBox.val());table.draw();})});

dataTables使用相关推荐

dataTables常用参数
一.新版本和老版本的区别新版本的改进:https://datatables.net/new/1.10 新老版本参数变化列表:http://datatables.club/upgrade/1.10-c ...
使用datatables实现列宽设置、水平滚动条、显示某列部分内容
示例 1.//使用 columnDefs 给列设置宽度 $('#example').DataTable( { "columnDefs": [ //给第一列指定宽度为表格整个宽度的2 ...
datatables增删改查php,jQuery+datatables插件实现Ajax加载数据与增删改查功能示例_白峰_前端开发者...
本文实例讲述了这里给大家分享一下我在项目中用datatables实现ajax加载数据与增删改查注意,需要引入  搜索  新增  编辑  删除职业姓名性别爱好 //点击查找 $(" ...
DataTables 表格固定栏使用方法
有时候数据过多,为了用户体验,需要将重要的栏目固定不动,如下图所示: 从上图我们可以看出,表格滚动的时候,左边5栏是不动的.现在说一下实现方法: 插件地址: https://datatables.ne ...
Vue+DataTables warning:table id=xxxx -Cannot reinitialize DataTable.报错解决方法
问题描述: 使用DataTables来写列表,用vue来渲染数据,有搜索功能,每次点击搜索就会报错,如下图所示. 问题排查: 找了一系列原因,最后发现是我每次请求完数据之后都会添加分页功能,从而导致了 ...
datatables如何把列设置成hidden隐藏域？
官网:https://datatables.net/reference/option/设置: visible: false如下: <!DOCTYPE html><html>&l ...
一.jquery.datatables.js表格显示
2014年8月10日星期日使用jquery.datatables.js取后台数据. 1.html代码 <table class="dataTables-example"&g ...
datatables ajax刷新数据
2019独角兽企业重金招聘Python工程师标准>>> 1.10版本以前的DataTables使用fnReloadAjax (http://www.datatables.net/p ...
Datatables中文API——回调函数
fnCookieCallback:还没有使用过 $(document).ready(function () {$('#example').dataTable({"fnCookieCallba ...
jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'style' of undefined
Jquery DataTable使用报这个错: jquery.dataTables.min.js: Uncaught TypeError: Cannot read property 'style' o ...

dataTables使用

dataTables使用相关推荐

最新文章

热门文章