Datatables常用操作

1、jsp和对应的js文件

1.1js

//页面初始化就加载
$(function() {
    //表格列
    /** *dataTables开始** */
    dataTables = $('#articleListTable').DataTable({
        "language": {
            "info": "当前 _START_ - _END_ 条 共 _TOTAL_ 条",
            "paginate": {
                "sFirst": "首页",
                "sPrevious": " < ",
                "sNext": " >",
                "sLast": " 尾页 "
            },
            "emptyTable": "没有符合条件的记录!",
            "lengthMenu": "显示 _MENU_ 条",
            "sZeroRecords": "没有找到匹配的记录",
            "sInfoEmpty": ""
        },
        "aLengthMenu": [10, 20, 50, 100],
        "pagingType": "full_numbers", // 用于指定分页器风格
        // "full_numbers"" or
        // ""two_button"",
        // default
        // ""two_button""
        "bAutoWidth": true,
        "scrollX": true,
        "ajax": {
            "url": path + "/appletManage/mpArticle/queryPage",
            "type": "POST",
            "dataType": "json",
            "data": {
                filter : filter
            }
        },
        "processing": true,
        "serverSide": true,
        "bLengthChange": true,
        "bSort": false, // 排序功能
        "searching": false,
        "bStateSave": false, // 保留分页信息
        "resetPaging": false,
        "dom": '<"top">t<"bottom"lip><"clear">',
        "columns": [
            //数据对应的内容
            {"data": "ord"},
            {"data": "status_flag_nm"},
            {"data": "thumbnail_url"},
            {"data": "title"},
            //操作按钮,样式靠右
            {"data": "","class": "align-right"}
        ],
        "columnDefs": [
            {
                "render": function(data, type, row, meta) {
                    //序号列
                    return meta.row + 1 + meta.settings._iDisplayStart;
                },
                "orderable": false,
                //表示第一列
                "targets": 0
            },
            {
                //如果表格中要显示图片,可以修改样式
                "render": function(data, type, row) {
                    var html = "<img style=\"height: 50px;width:50px;\" src=" + row.thumbnail_url +" />"; //缩略图
                    return html;
                },
                "orderable": false,
                "targets": 2
            }, {
                "render":function(data,type,full){
                    return "<div class=\"table_td_nowrap_40\" title=\""+data+"\">"+data+"</div>";
                },
                "targets": 3
            },{
                "render": function(data, type, row, meta) {
                    var html = "";//编辑按钮
                    html += '<input class="btn btn-mini btn-white btn-purple" type="button" value="查看"  onclick="articleShow(\'' + row.id + '\',\'true\',\'view\')"/>';
                    html += '<input class="btn btn-mini btn-white btn-purple" type="button" value="编辑"  onclick="articleShow(\'' + row.id + '\',\'false\',\'edit\')"/>';
                    if(row.status_flag == "Y"){
                        html += '<input class="btn btn-mini btn-white btn-purple" type="button" value="禁用" onclick="articleState(\'' + row.id + '\',\'N\')"/>';
                    }else{
                        html += '<input class="btn btn-mini btn-white btn-purple" type="button" value="启用" onclick="articleState(\'' + row.id + '\',\'Y\')"/>';
                    }
                    html += '<input class="btn btn-mini btn-white btn-purple" type="button" value="删除"  onclick="articleDelete(\'' + row.id + '\',\'false\',\'edit\')"/>';
                    html += '<input class="btn btn-mini btn-white btn-purple" type="button" value="上移" onclick="updateOrd(\'' + row.id + '\',\'up\',\''+row.ord+'\','+(meta.row)+')"/>';
                    html += '<input class="btn btn-mini btn-white btn-purple" type="button" value="下移" onclick="updateOrd(\'' + row.id + '\',\'down\',\''+row.ord+'\','+(meta.row)+')"/>';
                    return html;
                },
                "orderable": false,
                "targets": 4
            }]

    });

});

1.2jsp

<!--第一点,列个数要和js对应-->
<!--第二点,table的id要和js对应-->
<table id="articleListTable"
       class="table table-striped table-hover dataTable"
       cellspacing="0">
    <thead>
        <tr>
            <th>序号</th>
            <th>显示状态</th>
            <th>缩略图</th>
            <th>标题</th>
            <th>操作</th>
        </tr>
    </thead>
</table>

2、上移下移操作

2.1、js文件

/**
 * 上移下移
 * */
function updateOrd(id,type,ord,rowIndex){

    if(dataTables.rows()&& dataTables.rows().data()){
        var data = dataTables.rows().data();

        var nextIndex = 0;
        if(type == "up" && rowIndex == 0 ){
            $.zkbr.alert("错误信息", "已经是第一条数据");
            return false;
        }

        if(type == "down" && rowIndex == (data.length - 1)){
            $.zkbr.alert("错误信息", "已经最后一条数据");
            return false;
        }

        if(type == "up"){
            nextIndex = rowIndex - 1;
        } else {
            nextIndex = rowIndex + 1;
        }

        //        console.log(data[nextIndex])

        $.ajax({
            url: path+"/appletManage/mpArticle/updateOrd",
            type:"post",
            dataType:"json",
            params: null,
            data : {
                "id": id,
                "ord": data[nextIndex].ord,
                "nextId": data[nextIndex].id,
                "nextOrd": ord
            },
            success:function(data){
                if (data.statusCode == '200') {
                    // 返回后显示方案状态为已初审分配
                    dataTables.ajax.reloadData({filter : filter});
                } else {
                    $.zkbr.alert("错误信息", data.errorMsg);
                }
            }
        })
    }
}

2.2、controller

/**
     * 上移下移,交换排序
     * 
     * @param id     文章ID
     * @param ord    旧的排序
     * @param newOrd 新的排序
     * @return
     */
@ResponseBody
@RequestMapping(value = "/updateOrd")
public AjaxResult updateOrd(String id, Integer ord, String nextId,Integer nextOrd) {
    if (null == id || StringUtils.isEmpty(id)) {
        return new AjaxResult().fail("500", "当前行ID不能为空");
    }

    if (null == ord) {
        return new AjaxResult().fail("500", "当前行序号不能为空");
    }

    if (null == nextId) {
        return new AjaxResult().fail("500", "移动行的ID不能为空");
    }

    if (null == nextOrd) {
        return new AjaxResult().fail("500", "移动行序号不能为空");
    }
    Map<String, Object> articleInfo = service.getOne(new HashMap<String, Object>() {
        private static final long serialVersionUID = 1L;
        {
            put("id", id);
        }
    });
    if (null == articleInfo) {
        return new AjaxResult().fail("500", "数据不存在");
    }

    UserInfo userInfo = UserContext.getCurrentUser();
    //更新当前行
    service.updateOrd(new HashMap<String, Object>() {
        private static final long serialVersionUID = 1L;
        {
            put("id", id);
            put("ord", ord);
            put("update_user", userInfo.getUserId());
        }
    });

    //更新互换的行
    service.updateOrd(new HashMap<String, Object>() {
        private static final long serialVersionUID = 1L;
        {
            put("id", nextId);
            put("ord", nextOrd);
            put("update_user", userInfo.getUserId());
        }
    });

    return new AjaxResult().success200();
}

2.3、service

/**
     * 修改序号
     * 
     * @param map
     */
public void updateOrd(Map<String, Object> map);

2.4、serviceImpl

/**
     * 修改序号
     * 
     * @param map
     */
@Override
public void updateOrd(Map<String, Object> map) {
    baseDao.update(getTableMapping() + ".updateOrd", map);
}

2.5、mapper.xml

<update id="updateOrd" parameterMap="paraMap">
    update mp_article 
    set ord = #{ord},
    update_user = #{update_user},
    update_date = current_timestamp
    where id = #{id}
</update>

评论

暂无

添加新评论