美文网首页
DataTable第一列添加行号问题

DataTable第一列添加行号问题

作者: 小岛wink | 来源:发表于2019-07-19 14:53 被阅读0次

    最近做的项目,个人中心各个管理界面列表都应用DataTable,大部分第一列都是CheckBox,提供多选进行删除功能,这次做的功能表格不需要多选删除,第一列要显示行号,去掉CheckBox,以下是添加行号的代码:

    //数据表格处理
            var table = $('#dataTable').DataTable({
                ajaxSource: "${ctx}/qindex/search",
                type:"post",
                bAutoWidth: false, //取消宽度自适应
                iDisplayLength: 5, //每页初始显示5条记录
                columns: [
            {  //行号
                    className: "编号",
                    orderable: false,
                data: null,
                sWidth:"5%",
                render: function (data, type, row, meta) {
                var no = meta.settings._iDisplayStart + meta.row + 1;
                return no;
            }},
                    {data: "qiId", visible: false},
                    {data: "name",orderable: false,sWidth:"40%"},//menuCatalogId
                    {data: "typeName",orderable: false,sWidth:"15%"},
                    {data: "sortPosition",orderable: false,sWidth:"10%"},
                    {data: "stsDate",orderable: false,sWidth:"20%"},
                    {createdCell: function (td, cellData, rowData, row, col) {
                            var operateHtml = "";
                            <shiro:hasPermission name="system:security:menu:edit">
                            if(operateHtml.length > 0) {operateHtml += "&nbsp;&nbsp;";}
                            operateHtml += "<i class='fa fa-pencil' onclick=\"editData('" + rowData.qiId + "')\"></i>";
                            </shiro:hasPermission>
                            <shiro:hasPermission name="system:security:menu:delete">
                            if(operateHtml.length > 0) {operateHtml += "&nbsp;&nbsp;";}
                            operateHtml += "<i class='fa fa-trash-o' onclick=\"deleteData('" + rowData.qiId + "')\"></i>";
                           </shiro:hasPermission>
                            $(td).html(operateHtml);
                        }, orderable: false
                    }
                ],
                columnDefs: [
                    {
                        defaultContent: "",
                        targets: "_all"
                    }
                ],
                select: {
                    style: 'multi',
                    selector: 'td:first-child'
                },
                order: [[1, 'desc']]
            });
    
    

    显示效果:


    image.png

    相关文章

      网友评论

          本文标题:DataTable第一列添加行号问题

          本文链接:https://www.haomeiwen.com/subject/qdxslctx.html