Bootstrap框架--DataTables列表示例--添加判断

一、参考代码

<%@ include file="./include/header.jsp"%>  
<!-- jquery.dataTables.css -->
<link href="/plugins/DataTables-1.10.16/media/css/dataTables.bootstrap.css" rel="stylesheet"
          type="text/css"></link>
<link rel="stylesheet" href="/plugins/DataTables-1.10.16/extensions/Responsive/css/responsive.dataTables.css"></link>
  <!-- DATE STYLES-->
<link rel="stylesheet" href="/plugins/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css"></link>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>  
<%@ taglib prefix="cf" uri="com.data.web.view.function" %>  
        <div id="page-wrapper">  
            <div id="page-inner">  


        <div class="row">  
                    <div class="col-md-12">  
                        <h1 class="page-header">  
              DataTables<small>示例</small>  
                        </h1>  
                    </div>  
       </div>  


       <div class="row">
            <form class="form-inline col-sm-11" id="search_form">
                <div class="form-group ">
                    <input class="form-control" placeholder="名称或其他" name="name">
                </div>
                <div class="form-group">
                    <select class="form-control" id="gender" name="gender">
                        <option value="">--</option>
                        <option value=1>男</option>
                        <option value=0>女</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="beginTime">开始</label> <input type="text"
                        class="datepicker form-control"
                        data-date-format="yyyy-mm-dd 00:00:00" name="beginTime"
                        id="beginTime" />
                </div>
                <div class="form-group">
                    <label for="endTime">截止</label> <input type="text"
                        class="datepicker form-control"
                        data-date-format="yyyy-mm-dd 23:59:59" name="endTime" id="endTime" />
                </div>
                <button type="button" id="query" class="btn btn-success query mt-5">查询</button>
                <button type="button" id="add" class="btn btn-info add mt-5">新建</button>
            </form>
        </div>
        <!-- /. ROW  -->


      <div class="row">
            <div class="col-md-12">
                <div class="panel panel-default">
                    <div class="panel-heading">示例列表</div>
                    <div class="panel-body">
                        <div class="table-responsive">
                            <table class="table table-striped table-bordered responsive table-hover" id="table" cellspacing="0" width="100%">
                                <thead>
                                    <tr>
                                        <th width="8%" class="min-mobile-l">姓名</th>
                                        <th width="10%" class="min-mobile-l">电话</th>
                                        <th width="10%" class="min-mobile-l">性别</th>
                                        <th width="10%" class="min-mobile-l">时间</th>
                                        <th width="8%" class="min-mobile-l">操作</th> 
                                    </tr>
                                </thead>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- /. ROW  -->

        </div>  
            <!-- /. PAGE INNER  -->  
        </div>  
        <!-- /. PAGE WRAPPER  -->  
 <%@ include file="./include/footer.jsp"%>  
 <!-- DATA TABLE SCRIPTS -->
<script src="/plugins/DataTables-1.10.16/extensions/Responsive/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="/plugins/DataTables-1.10.16/media/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/plugins/DataTables-1.10.16/media/js/dataTables.bootstrap.min.js"></script>
<script src="/plugins/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script src="/plugins/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    $('.datepicker').datetimepicker({
        language : 'zh-CN',
        autoclose : true
    });

    refreshTable();//刷新列表数据内容
    clickEvent();//绑定表格中的按钮事件

    //点击查询  
    $('button.query').on("click", function() {
        refreshTable();
        clickEvent();
    });

    $('button.add').on('click',function(){
        location.href = '/create';
    });

});
function clickEvent(){
    $('#table').on('click','.js-delete',function(){
        if(confirm('确认删除该条数据?')){
            var id = $(this).attr('data-id');
            $.get('/delete?id='+id+'', function(result){
            console.log(result);
                if(result==0){
                    alert('删除成功');
                    window.location.reload();
                }
            })
        }
    }).on('click','.js-edit',function(){
        var id = $(this).attr('data-id');
        location.href = '/edit?id='+id+'';
    })
}

function refreshTable(){

    var $searchForm = $('#search_form').on('submit', function () {
        $dt.DataTable().searchEx({}).draw();
        return false;
    });

    var $dt = $('#table').on('preXhr.dt', function (e, settings, data) {
        //data.search.value = $searchForm.formGet();
    }).dataTable({
        "columns" : [
            {
                "data" : "name",
                "class" : "text-center"
            },
            {
                "data" : "tel",
                "class" : "text-center",
                "render" : function(data, type, row) {
                    if(data){
                    var ms="00-";
                    ms=row.name+"的电话"+ms+data;
                    return ms;
                    }
                    return "";
                }
            },
            {
                "data" : "gender",
                "class" : "text-center",
                "render" : function(data, type, row) {
                    if(data==0){
                    return "女";
                    }else if(data==1){
                    return "男";
                    }
                    return "";
                }
            },
            {
                "data" : "creatTime",
                "class" : "text-center",
                "render" : function(data, type, row) {
                    return new Date(data).Format("yyyy-MM-dd hh:mm:ss");  
                }
            },
            {
                "data" : "id",
                "class" : "text-center",
                "render" : function(data, type, row) {
                    return '<span class="btn btn-primary btn-xs ml-5 js-edit" data-id="'+data+'">编辑</span> <span class="btn btn-danger btn-xs ml-5 js-delete" data-id="'+data+'">删除</span>';
                }
            }
          ],
        "ajax" : {//类似jquery的ajax参数，基本都可以用。
            type : "post",//后台指定了方式，默认get，外加datatable默认构造的参数很长，有可能超过get的最大长度。
            url : "/listData",
            dataSrc : "data",//默认data，也可以写其他的，格式化table的时候取里面的数据
            data : function(d) {//d 是原始的发送给服务器的数据，默认很长。
                var param = {};//因为服务端排序，可以新建一个参数对象
                param.start = d.start;//开始的序号
                param.length = d.length;//要取的数据的
                var formData = $(
                        "#search_form")
                        .serializeArray();//把form里面的数据序列化成数组
                formData
                        .forEach(function(e) {
                            param[e.name] = e.value;
                        });
                return param;//自定义需要传递的参数。
            },
        },
        //"ajax": $.fn.dataTable.pagerAjax({url: "/listData"}),
        "destroy":true,
        lengthChange : false,
        serverSide : true,//分页，取数据等等的都放到服务端去
        searching : false,
        processing : true,//载入数据的时候是否显示“载入中”
        bDestroy : true,
        pageLength : 20,//首次加载的数据条数
        ordering : false,//排序操作在服务端进行，所以可以关了。
        language : {
            processing : "载入中",//处理页面数据的时候的显示
            paginate : {//分页的样式文本内容。
                previous : "上一页",
                next : "下一页",
                first : "第一页",
                last : "最后一页"
            },
            zeroRecords : "没有内容",//table tbody内容为空时，tbody的内容。
            //下面三者构成了总体的左下角的内容。
            info : "第 _PAGE_/_PAGES_页 共 _TOTAL_条记录",//左下角的信息显示，大写的词为关键字。
            infoEmpty : "第 _PAGE_/_PAGES_页 共 _TOTAL_条记录",//筛选为空时左下角的显示。
            infoFiltered : ""//筛选之后的左下角筛选提示(另一个是分页信息显示，在上面的info中已经设置，所以可以不显示)，
        },
        "columnDefs": [{
            "defaultContent": "",
            "targets": "_all"
          }]
    }).on('click', 'a[row-index]', function () {
    }); 
}


//对Date的扩展，将 Date 转化为指定格式的String
//月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符， 
//年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字) 
//例子： 
//(new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423 
//(new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18 
Date.prototype.Format = function (fmt) { //author: meizz 
 var o = {
     "M+": this.getMonth() + 1, //月份 
     "d+": this.getDate(), //日 
     "h+": this.getHours(), //小时 
     "m+": this.getMinutes(), //分 
     "s+": this.getSeconds(), //秒 
     "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
     "S": this.getMilliseconds() //毫秒 
 };
 if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
 for (var k in o)
 if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
 return fmt;
}
</script>
</body>  
</html>  

参看链接：

https://blog.csdn.net/zzq900503/article/details/79211136