web前端工作笔记008---jQuery table jstable的使用方法,字符串太长显示...初始化显示数据

技术交流QQ群【JAVA,C++,Python,.NET,BigData,AI】：170933152

刷新表格:

下面这样刷新,需要这两行

var pages = _table.page.info().page;
_table.page(pages).draw(false);

draw()

var table = $('#example').DataTable();

table.draw(true); // 重新绘制维护表格，分页将会被重置为第一页。

table.draw( false ); // 重新绘制维护当前分页位置的表格。

table.page( 'next' ).draw( 'page' ); // 更改表格页面，然后重新绘制

_table.page(pages).draw(false);

首先是有个放table的容器:

<div class="fixed-table-container" style="padding-bottom: 0px;"><div class="fixed-table-header" style="display: none;"><table></table></div><div class="fixed-table-body"><table id="roleListTable" data-mobile-responsive="true" class="table table-hover"><thead><tr><!--<th class="bs-checkbox " style="width: 36px;">--><!--<div class="th-inner "><input name="cb-check-all" type="checkbox"></div>--><!--<div class="fht-cell"></div>--><!--</th>--><th><div class="th-inner ">角色编号</div><div class="fht-cell"></div></th><th><div class="th-inner ">角色名称</div><div class="fht-cell"></div></th><th><div class="th-inner ">角色描述</div><div class="fht-cell"></div></th><!--<th>--><!--<div class="th-inner ">角色状态</div>--><!--<div class="fht-cell"></div>--><!--</th>--><th><div class="th-inner ">创建时间</div><div class="fht-cell"></div></th><th style="width: 260px;"><div class="th-inner ">操作</div><div class="fht-cell"></div></th></tr></thead ><tbody id="examPaperProperties"><!--<tr>--><!--<td><input type="checkbox"></td>--><!--<td>1</td>--><!--<td>管理员</td>--><!--<td>admin</td>--><!--<td>1</td>--><!--<td>--><!--<i class="fa fa-toggle-on text-info fa-2x" onclick="disable('1')"></i>--><!--</td>--><!--<td>--><!--<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#roleModal">编辑</button>--><!--<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#roleModal2">删除</button>--><!--<button type="button" class="btn btn-danger btn-xs">删除</button>--><!--</td>--><!--</tr>--><!--<tr>--><!--<td><input type="checkbox"></td>--><!--<td>1</td>--><!--<td>管理员</td>--><!--<td>admin</td>--><!--<td>1</td>--><!--<td>--><!--<i class="fa fa-toggle-off text-default fa-2x" onclick="disable('1')"></i>--><!--</td>--><!--<td>--><!--<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#roleModal">编辑</button>--><!--<button type="button" class="btn btn-primary btn-xs" data-toggle="modal" data-target="#roleModal2">删除</button>--><!--<button type="button" class="btn btn-danger btn-xs">删除</button>--><!--</td>--><!--</tr>--></tbody></table></div><div class="fixed-table-footer" style="display: none;"><table><tbody><tr></tr></tbody></table></div></div>

2.初始化这个表格控件

var $table = $('#roleListTable');_table = $table.dataTable($.extend(true, {}, constant.datatables.default_option, {ajax: function(data, callback, settings) { // ajax配置为function,手动调用异步查询// 封装请求参数var param = {};param.roleName = $("#searchRoleName").val();param.roleIntro = $("#searchRoleIntro").val();param.startDate=$("#stimeSearch").val();param.endDate=$("#etimeSearch").val();// 组装分页参数param.size = data.length; // 每页显示多少数据param.page = (data.start / data.length) + 1; // 当前页码;constant.ajax.get(constant.url.sc_support.roleListByParentId, param, function(result) {// 异常判断与处理if(result.success == 'false') {$.modal.alertError("网络原因,请稍后重试!");return;}// 封装返回数据，这里仅演示了修改属性名var returnData = {};returnData.draw = data.draw; // 这里直接自行返回了draw计数器,应该由后台返回returnData.recordsTotal = result.data.total;returnData.recordsFiltered = result.data.total; // 后台不实现过滤功能，每次查询均视作全部结果returnData.data = result.data.list;callback(returnData);}, function() {$.modal.alertError("网络原因,请稍后重试!");});},columns: [{//角色编号data: "roleId",width: 70,className: "",render: function(data, type, row, meta) {if(data == null) {return "";}// data = constant.func.replaceTags(data);// return '<span title="' + data + '">' + data + '</span>';return data;}},//角色名称{data: "roleName",width: "25%",className: "ellipsis", //添加这个以后如果字符串太长了会自动显示成...render: function(data, type, row, meta) {if(data == null) {return "";}return "<div>"+data+"</div>"; //注意如果没有给列添加render//jQuerytable会自动给数据外面加一层div,这样上面的//className: "ellipsis"才会起作用,如果用了render//需要自己给数据加上div}},//角色描述{data: "roleIntro",width: "25%",className: "ellipsis",render: function(data, type, row, meta) {if(data == null) {return "";}data = constant.func.replaceTags(data);return '<span title="' + data + '">' + data + '</span>';}},//时间{data: "roleCretime",width: "20%"},//操作{className: "td-operation",data: null,width: "20%",defaultContent: ""}],"createdRow": function(row, data, index) {//var $btnUpdate = $('<a href="#" data-toggle="modal" class="update" id="editRoleAccess" data-toggle="modal" data-target="#roleModal">编辑&nbsp;&nbsp;&nbsp;&nbsp;</a>');//var $btnDataAccess = $('<a href="#" data-toggle="modal" class="check" id="dataRoleAccess" data-toggle="modal" data-target="#roleModal2">数据权限&nbsp;&nbsp;&nbsp;&nbsp;</a>');var $btnDel = $('<a href="#" class="delete" id="dataDeleteRoleAccess">删除&nbsp;&nbsp;&nbsp;&nbsp;</a>');$('td:last', row).append($btnUpdate).append($btnDataAccess).append($btnDel);},"drawCallback": function(settings) {// 渲染完毕后的回调// 清空全选状态$(":checkbox[name='cb-check-all']", $table).prop('checked', false);// 默认选中第一行$("tbody tr", $table).eq(0).click();}})).api();

web前端工作笔记008---jQuery table jstable的使用方法,字符串太长显示...初始化显示数据相关推荐

Web前端工作笔记007---h5 canvas_雨滴头像合成_图像合成_合成雨滴头像
JAVA技术交流QQ群:170933152 刚开始用java后台合成,但是java就是老技术,合成的图像不清晰,有一些锯齿,还是不如直接用h5 canvas清晰就改用前端写了个雨滴头像合成工具但是 ...
Web前端工作笔记002---json数据查询的方法_json查询大全，JsonSQL数据查询，jfunk数据查询
JAVA技术交流QQ群:170933152 json数据查询的方法网上看到有一篇帖子,有8种json数据查询的方法,大家可以研究一下,我现在分享一下! JsonSQL JsonSQL实现了使用SQL ...
Web前端工作笔记013---拦截所有的ajax请求,设置出错信息
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 在用若依系统的时候发现,自己再ajax请求的地方,错误的时候已经提示了信息,但是还会有错误提示, ...
Web前端工作笔记011---ztree的使用方法_大全
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 需要引入: <link rel="stylesheet" href=&q ...
Web前端工作笔记001---封装前端数据字典_js 数组filter 总结_详解
JAVA技术交流QQ群:170933152 我这里是我封装,前端数据字典的时候,用到的//数据字典 var dic = function () {var dics;$.ajax({async: fal ...
link标签中的integrity和crossorigin字段---web前端工作笔记015
可以理解成可以跨域访问的吧. crossorigin: 该枚举属性指定在加载相关图片时是否必须使用CORS.可取的值包括以下两个: - anonymous:会发起一个跨域请求(即包含Origin: ...
关于HTML5中meta name=“viewport“ 的用法---web前端工作笔记014
移动端的布局不同于pc端,首先我们要知道在移动端中,css中的1px并不等于物理上的1px,因为手机屏幕的分辨率已经越来越高,高像素但是屏幕尺寸却没有发生太大变化,那就意味着一个物理像素点实际上塞入了 ...
Web前端工作笔记012---IE8兼容_WebSocket
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 ie8不支持websoket,需要用: WebSocketMain.swf 这个文件去后台请求84 ...
Web前端工作笔记010---IE8兼容_IE8不能使用foreach_indexOf的解决方案
技术交流QQ群[JAVA,C++,Python,.NET,BigData,AI]:170933152 关于IE不能使用foreach问题,需要使用前引入以下代码: 相当于给array扩展了一个fore ...

web前端工作笔记008---jQuery table jstable的使用方法,字符串太长显示...初始化显示数据

web前端工作笔记008---jQuery table jstable的使用方法,字符串太长显示...初始化显示数据相关推荐

最新文章

热门文章