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

本文为博主原创文章，未经博主添柴程序猿允许不得转载违者追究法律责任。

本文链接：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();