dataTables--H-ui，动态设置参数，参数居中，图片参数展示，时间参数展示，编辑删除和点击参数跳转

最新推荐文章于 2021-08-18 17:58:31 发布
干啥鸭
最新推荐文章于 2021-08-18 17:58:31 发布
阅读量867
点赞数 2
本文链接：https://blog.csdn.net/Drikay/article/details/87167721
版权
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    
    <script type="text/javascript" src="/lib/html5shiv.js"></script>
    <script type="text/javascript" src="/lib/respond.min.js"></script>
    
    <link rel="stylesheet" type="text/css" href="/static/h-ui/css/H-ui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/H-ui.admin.css"/>
    <link rel="stylesheet" type="text/css" href="/lib/Hui-iconfont/1.0.8/iconfont.css"/>
    <link rel="stylesheet" type="text/css" href="/static/h-ui.admin/skin/default/skin.css" id="skin"/>
    <link rel="stylesheet" type="text/css" href="/static/h-ui.admin/css/style.css"/>
   
    <script type="text/javascript" src="/lib/DD_belatedPNG_0.0.8a-min.js"></script>
    <script>DD_belatedPNG.fix('*');</script>
    
    <title>标题</title>

    <!--显示所有单元格信息居中显示,也可以自定义下面说明自定义方法-->
    <style type="text/css">
        .table > tbody > tr > td {
            text-align: center;
        }
    </style>

</head>
<body>
<div>
    <div align="center">
        <input type="text" name="id" id="id" placeholder="ID" style="width:100px" class="input-text">
        <span>
             <select id="type_list" name="type_list" style="width:80px" class="select">
                  <option value="">下拉列表</option>
                  <option value="1">一号</option>
                  <option value="1">二号</option>
             </select>
        </span>

        <span>
             <select id="opt_id" name="opt_id" style="width:80px" class="select">
                 <!--后端代码
                        @RequestMapping("url")
                        public String parkInfo(Model model){
                            List<packInfo> list=packInfo.packInfoList();
                            model.addAttribute("list",list);
                            return "当前页面js路径";
                        }
                    -->
                 <option value="">动态设置下拉列表值</option>
                 <c:forEach items="${list}" var="opt_id">
                       <option value="${opt_id.id}"> (${opt_id.id}) ${opt_id.name} </option>
                 </c:forEach>
             </select>
        </span>

        <button name="" id="search" class="btn btn-success" type="submit"> 搜索</button>
        <button name="" id="reset" class="btn btn-success" type="reset"> 重置</button>
    </div>


    //动态设置参数
    <div class="mt-20">
        <table id="table_id_example">
            <thead>
            <tr class="text-c">
                <th width="25"><input type="checkbox" name="head" id="checkAll" value=""></th>
                <th width="100">名称</th>
                <th width="80">图片</th>
                <th width="50">描述</th>
                <th width="100">时间</th>
                <th width="100">操作</th>
            </tr>
            </thead>
        </table>
    </div>
</div>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" src="/lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="/lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="/static/h-ui/js/H-ui.min.js"></script>
<script type="text/javascript" src="/static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/lib/laypage/1.2/laypage.js"></script>

<script type="text/javascript">
    
    //dataTables方法
    var oTable = $('#table_id_example').dataTable({
        "searching":false,
        "bProcessing": true, //DataTables载入数据时，是否显示‘进度’提示
        "bSort" : true, //是否启动各个字段的排序功能
        "bFilter": false, //是否启动过滤、搜索功能
        "bServerSide": true, //开启服务模式
        "bInfo" : true, //是否显示页脚信息，DataTables插件左下角显示记录数
        "aLengthMenu": [25,50, 100, 150],//自定义展示条数
        "fnDrawCallback" : function(){
            this.api().column(1).nodes().each(function(cell, i) {
                cell.innerHTML =  i + 1;
            });
        },
        //使用ajax异步请求
        ajax: {
            type: 'POST',
            url: 'URL',
            //设置搜索所需参数
            data:function (d) {
                d.id=$("#id").val();
                d.type_list=$("#type_list").val();
                d.opt_id=$("#opt_id").val();
            },
        },
        //设置有空值不提示
        columnDefs: [
            {
                "defaultContent": "",
                "targets": "_all"
            }
        ],

        //自定义列参数居中，下标为 0,1 的列数据居中显示，如果设了所有居中，无需在指定，
        "createdRow": function( row, data, dataIndex ) {
            $(row).children('td').eq(0).attr('style', 'text-align: center;');
            $(row).children('td').eq(1).attr('style', 'text-align: center;');
        },

        //设置参数，设置的参数要对应上面 th 标签设置的每一列
        columns: [
            {
                data: "",
                bSortable: false,//是否排序
                name: "左边选框",//参数名
                //动态生成复选框
                render: function (data, type, row, meta) {
                    return '<input id="check"  class="check" name="check" type="checkbox" onClick="add_Goods(this)" value=" ' + data + '" />'
                }
            },{
                data:"id",//获得的参数对应的字段名
                name:"ID" //参数的名称
            },{
                data:"name",
                name:"名称",
                //设置参数为链接形式，点击参数可以跳转到所指定的页面
                render:function (data,type,row,meta) {
                    return '<u style="cursor:pointer" class="text-primary" onClick="shop_find(this,\'/test/url\',\'\')">' +
                                data+
                            '</u>';
                }
            },{
                data: "img",
                name: "图片",
                bSortable: false,//是否排序
                //设置图片的展示样式
                render: function (data, type, row, meta) {
                    return '<img width="80" height="auto" class="picture-thumb"  src="' + data + '">';
                }
            },{
                data:"status",
                name:"描述",
                bSortable: false,//是否排序
                //设置返回样式
                render: function (data, type, row, meta) {
                    if(1==data){
                        return "个人";
                    }
                    if(2==data){
                        return "企业";
                    }
                    return "未知";
                }
            } ,{
                data: "create_time",
                name: "时间",
                //格式化时间戳，如果没有时间页面展示为空
                render: function (data, type, row, meta) {
                    if(null!=data){
                        return new Date(data).toLocaleString().replace(/:\d{1,2}$/, ' ');
                    }
                    return "";
                }
            },{
                data: "",
                name: "操作列",
                render: function (data, type, row, meta) {
                    var html = "<a title='编辑' href='javascript:;' onclick='edit_info(this,\"/edit_info/url\",\"\")' class='ml-5' style='text-decoration:none'><i class='Hui-iconfont'>&#xe6df;</i></a>";
                    html += "<a title='删除'  href='javascript:;' onclick='del_info(this,\"/del_info/url\",\"\")' style='text-decoration:none' > <i class='Hui-iconfont'>&#xe6e2;</i></a>";
                    return html;
                }
            }
        ],
    });

    //重置按钮，重置输入的信息
    (function () {
        document.querySelector('#reset').addEventListener('click', function () {
            document.querySelector('[name="mall_id_list"]').value = '';
            document.querySelector('[name="merchant_type_list"]').value = '';
        });
    })();

    //初始化页面
    $("#search").click(function () {
        //刷新
        $('#table_id_example').dataTable().fnDraw();
    });
    

    /**
     * 点击名称跳转页面
     * */
    function shop_find(_this,url,w,h) {
        var nRow = $(_this).parents('tr')[0];//得到这一行
        var aData = $("#table_id_example").dataTable().fnGetData(nRow);//得到这一行的json数据
        var mallID = aData.id;//得到所需参数
        var mallName = aData.name;//得到所需参数
        var aUrl=url+"?id="+mallID + 
                     "&name=" + encodeURI(encodeURI(mallName));//拼接参数
        //设置打开界面的   标题，路径，宽度，高度
        layer_show(id,aUrl,1500,h);
    }
    
    /**
     * 编辑
     */
    function edit_info(_this, url, w, h) {
        var nRow = $(_this).parents('tr')[0];//得到这一行
        var aData = $("#table_id_example").dataTable().fnGetData(nRow);//得到这一行的json数据
        //获得所需参数
        var id= aData.id;
        var name = aData.name;
        var status = aData.status;
        var create_time= new Date(aData.create_time).toLocaleString().replace(/:\d{1,2}$/, ' ');
        //拼接所需参数
        var aUrl = url + "?id=" + id
                       + "&name=" + encodeURI(encodeURI(name))
                       + "&status=" + encodeURI(encodeURI(status))
                       + "&create_time=" + encodeURI(encodeURI(create_time));
        layer_show(goods_name, aUrl, 800, h);
    }

    /**
     *删除
     * */
    function del_info(_this, url) {
        var nRow = $(_this).parents('tr')[0];//得到这一行
        var aData = $("#table_id_example").dataTable().fnGetData(nRow);//得到这一行的json数据
        //获得所需参数
        var id = aData.id;

        layer.confirm('确认要删除吗？', function (index) {
            $.ajax({
                type: 'POST',
                url: url,
                data: {
                    id: id,
                },
                success: function (data) {
                    layer.msg('已删除!', {icon: 1, time: 1000});
                    //加载刷新父类页面
                    oTable.dataTable().fnDraw();
                },
                error: function (xhr) {
                    alert(xhr.id);
                },
            });
        });
    }
    

</script>

</body>
</html>
项目用的js，css文件
链接: https://pan.baidu.com/s/1KGQcJO0bbhuldLYUXeVtvA
提取码: yiwi