• 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.效果图

  • 相关阅读:
    python-面向对象-类
    python- collections-time-datetime
    python-json-pickle-shelve-random-os-sys-hashlib
    python-递归函数
    python-迭代器
    python-内置函数
    python-易错问题
    python-闭包函数和装饰器
    pytho-函数作用域
    List 拆分集合与 读写XML配置文件
  • 原文地址:https://www.cnblogs.com/XueTing/p/14048224.html
Copyright © 2020-2023  润新知