Jquery datatables.js 的使用

controller

@Controller
@RequestMapping("/sales/commodity/")
@Slf4j
public class CommodityController extends CommonController {
    private final String path = "sales/commodity/";
    @Autowired
    private CommodityService commodityService;

    /**
     * 商品管理
     *
     * @return
     */
    @GetMapping("list")
    public String list() {
        return path + "list";
    }

    @PostMapping("list")
    @ResponseBody
    public Page list(Page page) {
        log.info(JSON.toJSONString(page));
        Page temp = commodityService.page(page);
        log.info(JSON.toJSONString(temp));
        return Page.builder().data(temp.getData())
                .draw(temp.getDraw())
                .recordsTotal(temp.getRecordsTotal())
                .recordsFiltered(temp.getRecordsFiltered())
                .build();
    }

}

service

@Slf4j
@Service
public class CommonServiceImpl<T> implements CommonService<T> {

    @Autowired
    private CommonMapper<T>  commonMapper;

    @Override
    public Page page(Page page) {
        int count = commonMapper.selectCount(page);
        List<T> commodities = commonMapper.selectPage(page);
        page.setRecordsTotal(count);
        page.setRecordsFiltered(count);
        page.setData(commodities);
        return page;
    }
}

mapper.xml mybatis sql

<select id="selectCount" parameterType="com.sunup.noend.pojo.Page" resultType="java.lang.Integer">
    select count(id) from t_commodity as tc
  </select>
  <select id="selectPage" parameterType="com.sunup.noend.pojo.Page" resultMap="BaseResultMap">
    select
    <include refid="Base_Column_List"/>
    from t_commodity
    limit #{start},#{length}
  </select>

Page.java 分页类

@Data
@AllArgsConstructor
@NoArgsConstructor
@Builder
public class Page {
    /**
     * 当前页
     */
    private int start;
    /**
     * 显示行数
     */
    private int length;
    /**
     * 过滤后的记录数
     */
    private int recordsFiltered;
    private Object data;
    private int draw;
    /**
     * 数据库里总共记录数
     */
    private int recordsTotal;
    /**
     * 动态参数
     */
    private JSONObject param;
}

<!-- Bootstrap Core CSS -->
<link href="/static/assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<table id="datatable" class="display nowrap table table-hover table-striped table-bordered" cellspacing="0"
                                       width="100%">
                                    <thead>
                                    <tr>
                                        <th>id</th>
                                        <th>名称</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                </table>

<script src="/static/assets/plugins/jquery/jquery.min.js"></script>
<script src="/static/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/assets/plugins/datatables/datatables.min.js"></script>
<script src="/static/libs/buttons/1.2.2/dataTables.buttons.min.js"></script>

$('#datatable').DataTable({
            dom: 'Bfrtip',
            buttons: [
                'copy', 'csv', 'excel', 'pdf', 'print'
            ],
            pagingType:"full_numbers",
            processing:true,
            serverSide:true,
            "ajax":{
                "url":"/sales/commodity/list",
                "type":"post",
                "data":function(data){
                    console.log("dd");
                    console.log(data)

                }
            } ,"columns": [
                { "data": 'id' },
                { "data": 'name' },
                { "data": 'norm' },
                { "data": 'lotNumber' },
                { "data": 'inventory' },
                { "data": 'supplyPrice' },
                { "data": 'retailPrice' },
                { "data": 'wholesalePrice' },
            ],
            "columnDefs":[{
                "targets":8,
                "render":function(data,type,row,meta){
                    return '<button class="btn btn-danger">删除</button> <button class="btn btn-info">修改</button>';
                }
            }],
            // 国际化
            language: {
                "sProcessing": "处理中...",
                "sLengthMenu": "显示 _MENU_ 项结果",
                "sZeroRecords": "没有匹配结果",
                "sInfo": "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
                "sInfoEmpty": "显示第 0 至 0 项结果，共 0 项",
                "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
                "sInfoPostFix": "",
                "sSearch": "搜索:",
                "sUrl": "",
                "sEmptyTable": "表中数据为空",
                "sLoadingRecords": "载入中...",
                "sInfoThousands": ",",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上页",
                    "sNext": "下页",
                    "sLast": "末页"
                },
                "oAria": {
                    "sSortAscending": ": 以升序排列此列",
                    "sSortDescending": ": 以降序排列此列"
                }
            }
        });