day2:后台管理系统使用jquery.dataTable渲染数据

前言:需要引入下面的文件

<script src="js/jquery.js"></script>

<script src="js/jquery.dataTables.js"></script>

<link rel="stylesheet" href="css/jquery.dataTables.css"></link>

1.前端:

<!--查询条件-->
<form>
<input name="name" placeholder="名字" />
<input name="description" placeholder="描述" />
<button id="search">查询</button>
</form>
<!--查询条件-->
<!--数据div-->
<table id="productCategoryList" style=" 100%;" class="table table-striped table-bordered table-hover">
</table>
<!--数据div-->


<!--js渲染数据-->
<script>
$('#search').click(function() {
    productCategoryListData();
});

function productCategoryListData() {
            if (typeof oTable == 'undefined') {
                // productCategoryListb表格id
                oTable = $('#productCategoryList')
                        .dataTable(
                                {
                                    'bPaginate' : true, // 翻页功能
                                    'sServerMethod' : 'POST', // 提交方式
                                    'bServerSide' : true,
                                    'bProcessing' : true,
                                    'bFilter' : false,
                                    "bSort" : false,
                                    'sAjaxSource' : contextPath+'/admin/productCategorynfoDataTable',  //url
                                    "fnServerParams" : function(aoData) { // 查询条件
                                        aoData.push({
                                            "name" : "name",  //指定参数key为name
                                            "value" : $('[name=name]').val().trim()  //指定参数value为表单中name为name的值
                                        }, {
                                            "name" : "description",  //指定参数key为description
                                            "value" : $('[name=description]').val().trim()  //指定参数value为表单中name为description的值
                                        });
                                    },
                                    aoColumns : [
                                            {
                                                'mData' : 'id',
                                                'sTitle' : '<input type="checkbox" id="checkedAll" name="checkedAll" onclick="checkedAll()">',
                                                'sWidth' : '2%',
                                                'mRender' : function(data) {
                                                    var sRendor = '<input type="checkbox" name="ids" value="'+ data +'">';
                                                    return sRendor;
                                                }
                                            },
                                            {
                                                'sTitle' : '描述',
                                                'sWidth' : '35%',
                                                'mData' : 'description'
                                            },
                                            {
                                                'sTitle' : '缩略图',
                                                'mData' : 'image',
                                                'sWidth' : '20%',
                                                'mRender' : function(data) {
                                                    var returnValue = "<img src='"+contextPath+data+"' width='200'/>";
                                                    return returnValue;
                                                }
                                            },
                                            {
                                                'sTitle' : '更新者',
                                                'sWidth' : '10%',
                                                'mData' : 'updateUserName'

                                            },
                                            {
                                                'sTitle' : '操作',
                                                'mData' : 'id',
                                                'sWidth' : '9%',
                                                'mRender' : function(data) {
                                                    var returnValue = '<button id="update" class="btn btn-default btn-sm" onclick="editProductCategory('
                                                            + data
                                                            + ')"><i class="fa fa-pencil"></i>编辑</button>&nbsp&nbsp'
                                                            + '<button id="update" class="btn btn-default btn-sm" onclick="delProductCategory('
                                                            + data
                                                            + ')"><i class="fa fa-pencil"></i>删除</button>';
                                                    return returnValue;
                                                }
                                            } ]

                                });
            } else {
                var oSettings = oTable.fnSettings();
                oSettings._iDisplayLength = parseInt($(
                        '[name=productCategoryList_length] option:selected')
                        .val());
                $('.dataTables_length select').val(
                        $('[name=productCategoryList_length] option:selected')
                                .val());
                oSettings._iDisplayStart = 0;
                oTable.fnDraw();
            }
        }
</script>
<!--js渲染数据-->

2.后端

    @Override
    public Map<String, Object> getProductCategoryAll(PageInformation pageInfo, ProductCategory category) {
        HashMap<String, Object> datas = new HashMap<String, Object>();
        int pageCount = productCategoryMapper.selectProductCategoryCount(category);
        List<ProductCategory> list = pagingTool.PagingData("com.sybinal.shop.mapper.ProductCategoryMapper.selectProductCategoryAll", category,
                (Integer.parseInt(pageInfo.getiDisplayStart())/Integer.parseInt(pageInfo.getiDisplayLength()))+1,Integer.parseInt(pageInfo.getiDisplayLength()));
        
        datas.put("sEcho", pageInfo.getsEcho());
        datas.put("iTotalRecords", pageCount);
        datas.put("iTotalDisplayRecords", pageCount);
        datas.put("aaData", list);
        
        return datas;
    }
    
    

3.后端返回的json数据格式

{
    "iTotalRecords":3,
    "aaData":[
        {
            "id":10,
            "name":"肉禽类",
            "sortOrder":3,
            "image":"/resources/upload/01692ea7d99c4f758276afb5a8f19e56.jpg",
            "updateTime":"2020-11-27 15:16:14",
            "updateUserId":null,
            "description":"2",
            "productList":null,
            "updateUserName":"admin",
            "createTime":null
        },
        {
            "id":2,
            "name":"蔬菜蛋类",
            "sortOrder":2,
            "image":"/resources/upload/5ac5eec849634a619658b36ab4af95f1.jpg",
            "updateTime":"2020-11-27 15:16:23",
            "updateUserId":null,
            "description":"1",
            "productList":null,
            "updateUserName":"admin",
            "createTime":null
        },
        {
            "id":1,
            "name":"水果类",
            "sortOrder":1,
            "image":"/resources/upload/bf346f930ab1470c9ac49a1ec21bfc1e.jpg",
            "updateTime":"2020-11-27 15:16:31",
            "updateUserId":null,
            "description":"计算机语言（Computer Language）指用于人与计算机之间通讯的语言。计算机语言是人与计算机之间传递信息的媒介。计算机系统最大特征是指令通过一种语言传达给机器。为了使电子计算机进行各种工作，就需要有一套用以编写计算机程序的数字、字符和语法规划，由这些字符和语法规则组成计算机各种指令（或各种语句）。这些就是计算机能接受的语言。",
            "productList":null,
            "updateUserName":"admin",
            "createTime":null
        }
    ],
    "iTotalDisplayRecords":3,
    "sEcho":"1"
}

4.效果图