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

最新推荐文章于 2023-06-26 17:25:37 发布
最新推荐文章于 2023-06-26 17:25:37 发布
阅读量601 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： WebFront
本文为博主原创文章，未经博主 添柴程序猿 允许不得转载 违者追究法律责任。
本文链接：https://blog.csdn.net/lidew521/article/details/102592784
本文介绍如何使用Datatables插件刷新表格数据，并详细解释了如何通过自定义列渲染来增强表格的展示效果，包括如何处理空数据、替换标签和添加自定义操作按钮。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

技术交流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();

 

Node.js学习笔记--进阶之路
JackieDYH的博客
05-10 2184
简介 Node 是一个软件, 可以脱离浏览器, 独立执行JS文件 Node实现了ECMAScript标准, 所以语言跟JavaScript基本一致 因为想成为全栈开发(前后端都可以的大拿) PHP等语言是阻塞的, 性能不如nodeJS node是事件驱动, 非阻塞的 Node中是大量的, 事件和回调函数 单线程（主线程单线程，后台I/O线程池） 跨平台 (Node软件可以安装在window系统/linux系统/mac系统/等等) 安装Node ...
【CTF-Web】XSS漏洞学习笔记（附ctfshow web316-333题目）
最新发布
jayq1的博客
06-07 5716
XSS
JQuery Datatables单元格内显示数据太长，截取部分显示功能
机械键盘侠博客
08-21 1481
//初始化表格 var oTable = $("#example").DataTable({ ajax: { url: "dataList.action", data: { args1: "我是固定传参的值，在服务器接收参数[args1]" } }, columns: [{ data: "content", render: function(data, type, row, me.
自定义标签控制过长字符串的显示
ljw198827的博客
10-31 139
问题描述： 关于自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,挺让人头疼。 我们可以通过CSS控制自动换行，但效果并不是很好，查了一些资料也没有找的好的现成的控件，于是我编写了一个自定义标签解决这个问题，可能其中还存在一些问题，也不是很完善，我会虚心听从指教。 关于自定义标签的理论可参看：JSP2的自定义标签这片贴子（引用的）。 Java代码 ...
使用jQuery实现table表格排序js插件
limengmeng9006的专栏
12-16 6038
在前不久做的一个web项目中，需要实现js表格排序的效果，当时为了省事，就在网上找了几个相关的js插件，像:jQuery的table排序插件(感觉其使用比较麻烦或不清楚其具体用法，就没有使用)、原生态js的table排序插件等，最后比较看了下——采用了一个原生态js的table排序插件,并在其基础上做了些修改，虽有些勉强或有些地方使用不太舒服，但最算是比较好的实现了当时需要的功能。而前两天，对原有
JS+Jquery写的Table操作
weixin_34402090的博客
07-13 106
本意只是创建个可以操作表格增删查改的JS类，后来需求越来越多，想法越来越多，于是有了下面这个ＪＳ类 将页面HTMl组件和JS结合起来控制，加上Ajax来更新数据，有种如鱼的水的感觉。 ＪＳ类： View Code //控件使用说明: //1.HTML 命名规则： clesstba="GTab"为将要为这个表格创建的JS对象 //<table id="GoodsTab" cl...
[TimLinux] JavaScript table的td内容超过宽度缩为三个点
weixin_30399871的博客
08-25 220
1. 思路 CSS控制td内容自动缩为三个点 JS控制鼠标悬浮显示td全部内容 2. 实现 HTML代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Table/td自动隐藏内容</title> ...
Node.js学习笔记
m0_58575070的博客
06-26 403
writeFileSync(同步写入)文件重命名与移动(rename)stream(流式写入)文件复制 (先读后写)
Node.js（黑马）笔记05（完结）--博客案例
weixin_43745804的博客
06-10 1273
1、案例初始化 1.建立项目所需文件夹 public 静态资源 model 数据库操作 route 路由 views 模板 2.初始化项目描述文件 npm init -y 3.下载项目所需第三方模块 npm install express mongoose art-template express-art-template 4.创建网站服务器 5.构建模块化路由 6.构建博客管理页面模板 目录结构 路由admin.js及home.js home.js //引入express框架 const
最全面、最详细web前端面试题及答案总结
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
（四）如何使用Table
永无止境
03-23 3178
译自：http://download.oracle.com/javase/tutorial/uiswing/components/table.html 如何使用Table     利用 JTable 类，可以以表格的形式展示数据，可设置允许用户编辑数据。JTable 本身不拥有或者缓存数据；它只是数据的视图。这里有一个放在滚动面板上的典型表格：      本文展示如何完成一些常见...
dataTable的当前页面刷新draw操作
Justnow_的博客
09-04 3万+
dataTable当前页刷新实现talk is cheap，let’s show the code：var table = $('#example').DataTable(); // Sort by column 1 and then re-draw table.draw( false );很简单，将false参数传入draw方法中即可实现当前页刷新。别问我怎么知道的，这个问题曾经卡了我很长一段时间
DataTable数据覆盖之后无法跳到指定页面渲染的解决方法
豆之助
06-26 1090
dataTable在.clear()之后，dataTable记录的页数也是一块被置零的 即便用.row.add() 或者.rows.add() 添加数据之后，在没有.draw()之前，datatable记录的总页数也还是1 所以这时候用.page(currentPage).draw(false) 去调到指定页面渲染是不好使的 所以如果替换了表格的数据话，需要先.draw() 一遍，再.pag
DataTable列自定义渲染切页无效重绘
员润
12-15 628
DataTable列自定义渲染切页 进行DataTable重绘 jsp代码 table = $("#detail_table").DataTable({ language: lang, //提示信息 autoWidth: false, //禁用自动调整列宽 "bLengthChange": true, "aLengthMenu": [[10, 25, 50, 1000000], [10, 25,...
Jquery：dataTable().fnDraw(boolean)方法
奋斗鱼
09-24 4260
$("#").dataTable().fnDraw(boolean)是dataTable的重绘方法。 true：重置表格的初始状态，回到第一页， false：只是重新加载当前页，且保持当前页码不变。
Datatables学习文档
weixin_30588729的博客
12-21 342
Data sources 数据源DataTables可以从四种基本形式的数据源获取数据：HTML document (DOM)Javascript (array / objects)Ajax sourced data with client-side processingAjax sourced data with server-side processing1、在html表格数据上应用Date...
js制作html表格,jQuery表格生成插件Table.js
weixin_42135073的博客
06-23 398
插件描述：可以简单的生成表格，并可以根据option配置对象进行自定义样式。资源中附带该类API，只需要使用几个简单的方法就可以生成一个漂亮的表格。创建一个表格的的步骤：1.HTML页面需要提供一个带有ID属性的DIV：2.在该DIV中生成一个表格：Table().init({id:'table',header:['id','姓名','年龄'],data:[[1,'小王',22],[2,'小李',...
table表头和首列的表格固定-JQuery、js实现的Table表头固定
热门推荐
Harry_一棵树的博客
04-10 4万+
这个是最简单的方法，基于jQuery的解决方案,引入一个两个js就可以解决，当然也有使用css， position: sticky，这个我下一章节会讲它的优缺点，当然为了凸显jQuery的优点， 我就说话使用css的缺点：1.固定表头，和首列需要额外的html，结构复杂。2.体验效果，响应式布局很难解决，几乎没有解决 ，table固定了长宽，在其他页面会看到很别扭，影响美观。3.遇到bug，如
【常用 JS 插件】jQuery TreeTable 树表格插件
Yuu
11-09 7873
TreeTable treeTable 是跨浏览器、性能很高的 jQuery 的树表组件，它使用非常简单，只需要引用 jQuery 库和一个 js 文件，接口也很简单。 优点： 兼容主流浏览器：支持 IE6 和 IE6+, Firefox, chrome, Opera, Safari 接口简洁：在普通表格的基础上增加父子关系的自定义标签就可以 组件性能高：内部实现了只绑定了 table 的事件、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

添柴程序猿

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值