jquery datatables 列换行

datatables 插件做分页，有两种方式：

（1）后台返回所有数据，在前端分页；

（2）真正意义上的后台分页。

第一种前端分页比较简单，不做介绍，直接看第二种后台分页

html 代码 ：

<table id="dt_travel_list" class="mdl-data-table" cellspacing="0" width="100%">
                                    <thead>
                                        <tr>
                                            <th>Foryou_id</th>
                                            <th>Header Title</th>
                                            <th>Title</th>
                                            <th>Sub Title</th>
                                            <th>Promo Type</th>
                                            <th>Content</th>
                                            <th>Product_id</th>
                                            <th>Promo Photo</th>
                                            <th>Operation</th>
                                        </tr>
                                    </thead>
                                </table>

js 代码 ：

$(document).ready(function() {
    $('#dt_travel_list').DataTable({//绑定要遍历数据的 table 的 id
        processing : true,/* 数据加载时显示进度条 */
        paging : true,/* 开启分页 */
        searching : true,/* 搜索框 */
        pageLength : 25,/* 页大小，同时当前页每次加 10，不明白为什么每次增加 10 */
        lengthChange : false,/* 是否允许用户改变表格每页显示的记录数 */
        serverSide : true,/* 启用服务端分页，如果前端分页，这里为 false */
        iDisplayLength : 25,// 不知什么用
        pagingType : "full_numbers",//显示分页所有按钮
        scrollX : true,
        autoWidth :true,
        ordering : false,
        
        ajax : {
            url : "foryouInfoAll",
            type : "post",
            data : {},
            dataFilter : function(json){
                return json;
            }
        },
        
        /* 中间遍历的数据 */
        columns : [
            {data:"id",visible:false},//0 这里可以 {title:"Id编码",data:"id"} //title 列头标题，则可以省略前面 html 代码里面 <table></table> 内的 <tr></tr> 标签！
            {data:"header_title"},//1 这里的 header_title 对应后台返回的 bean 的属性值即可自动赋值显示
            {data:"title"},// 2
            {data:"sub_title"},// 3
            {data:"foryou_type"},// 4
            {data:null},//5 content//设置为 null ，是为了下面获取该数据后单独做处理，在自定义操作中单独处理！
            {data:null,visible:false},//6 product_id (visible:false //隐藏该列)
            {data:null},//7
            {data:null}//8
        ],
        
        /* 自定义的一些操作 */
        columnDefs : [
            {
                //orderable : false,//禁止排序
                targets : [5],//对应处理第5列数据！
                render : function(data,type,row,meta){
                    var content = data.content;
                    return "<textarea readonly='readonly' style='width: 100%;height: 100%;'>"+content+"</textarea>";
                }
            },
            {
                //orderable : false,//禁止排序
                targets : [6],
                render : function(data,type,row,meta){
                    var product_id = data.product_id;
                    if(product_id){
                        return product_id;
                    }else{
                        return "";
                    }
                }
            },
            {
                //orderable : false,//禁止排序
                targets : [7],
                render : function(data,type,row,meta){
                    var imgUrl = data.img_url;
                    return "<img src='"+imgUrl+"' alt='promo photo' width='50px'/>";
                }
            },
            {
                //orderable : false,//禁止排序
                targets : [8],
                render : function(data,type,row,meta){
                    return "<input type='button' value='update' onclick='backForyou(\""+data.id+"\")'/>";
                }
            }
        ]
    });
});

后台代码 ： 

import com.fasterxml.jackson.databind.ObjectMapper;
import org.json.JSONObject;
import com.fasterxml.jackson.core.JsonProcessingException;

@RequestMapping(value="/foryouInfoAll", method = RequestMethod.POST,produces = "text/plain;charset=UTF-8")
    @ResponseBody
    public Object foryouInfoAll(HttpSession session,HttpServletRequest request,HttpServletResponse response) {
        
        /**
         * 这几个参数后台直接取，前端不需要传!
         * 开启服务端分页后，datatables 会自动传！
         */
        Integer draw = Integer.parseInt(request.getParameter("draw"));//该参数取出来，不做任何操作，再传回去即可
        Integer start = Integer.parseInt(request.getParameter("start"));//配合求当前页，第一次传进来是 0，然后 10，20，30 ……
        Integer pageSize = Integer.parseInt(request.getParameter("length"));//【页大小】
        Integer nowPage = (start+pageSize)/pageSize;// 转成每次加 1 【当前页】
        int total = foryouService.getCount();// 总数量
        //自己处理分页逻辑
        List<ForYouBean> beans = foryouService.getForYouInfo(nowPage,pageSize);
        
        /**
         * 最重要的格式处理！
         * 工具类，处理成 datatable 规定的格式返回，才能正常显示！
         */
        DataTablePageUtil<ForYouBean> pages = new DataTablePageUtil<>();
        pages.setRecordsTotal(total);
        pages.setRecordsFiltered(total);
        pages.setDraw(draw);
        pages.setData(beans);
        
        /**
         * 集合对象转成json数据返回
         */
        ObjectMapper MAPPER = new ObjectMapper();
        String jsonString = MAPPER.writeValueAsString(pages);
        Object stringToValue = JSONObject.stringToValue(jsonString);
        System.out.println("==走完后台 foryouInfoAll 方法了==");
        return stringToValue;
    }

工具类（后台必须返回 datatables 要求的数据格式，否则不能正常展示数据，该工具类必须返回的数据有 recordsTotal 和 recordsFiltered 和 data 这3个参数！）：

/**
 * recordsTotal
 * recordsFiltered
 * 这两个字段都是 总数据，具体什么区别不详
 */
@Data//提供get，set方法
public class DataTablePageUtil<T> implements Serializable{
    
    private int nowPage;//当前页（当前页和页大小也传可不传，但下面4个必传！）
    private int pageSize;//页大小
    private int draw;//记录数
    private long recordsTotal;//总数量
    private long recordsFiltered;//总数据
    private List<T> data;//要展示的数据 bean
    
}

工具类最后生成的数据格式（如果自己可以拼接成这种格式给前端，可以不用以上的工具类，工具类只是辅助数据处理，但必须符合这种格式才可以让 datatables 正常展示数据）

{
    "draw": 1,
    "recordsTotal": 5,
    "recordsFiltered": 5,
    "data": [{
        "id": "5ccfe25f84bc103a4c780eff",
        "title": "00",
        "header_title": "00",
        "sub_title": "00",
        "content": "00",
        "img_url": "https://xxx/tpc/pb/thumbnail_Capture001.png_3dce77.png",
        "foryou_type": "inviter"
    }, {
        "id": "5cce8d49ee0e371ab31dda1f",
        "title": "6这是主标题",
        "header_title": "6这是头部标题",
        "sub_title": "6这是副标题",
        "content": "6文字内容吧啦吧啦一大堆！！",
        "img_url": "https://xxx/tpc/pb/foryou/foryou_medical_card001.png",
        "product_id": "5ba067dc5fbab3fd0901d400",
        "foryou_type": "product"
    }]
}