JQuery插件之-----Datatables(四)render与日期转换(moment.js)
来源：互联网 发布：jdk 7u80 windows x32 编辑：程序博客网 时间：2024/05/16 04:25
render是列渲染、官方给出的例子是:
<span style="font-size:18px;">$(document).ready(function() { $('#example').dataTable({ "columnDefs": [{ "render": function(data, type, row) { return data + ' (' + row[3] + ')'; }, "targets": 0 }, { "visible": false, "targets": [3] }] });});</span>效果是
这里实现的效果是这样的根据后台传过来的数据进行判断是否有效
把后台传过来的日期进行转换使用的是moment.js、使用它可以轻松解决前端开发中遇到的种种日期时间问题。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jquery datatables</title><link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css"> <link type="text/css" rel="stylesheet" href="css/dataTables.tableTools.css" /> <link type="text/css" rel="stylesheet" href="css/dataTables.bootstrap.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.dataTables.min.js"></script> <script type="text/javascript" src="js/moment.min.js"></script> <script src="js/bootstrap.min.js"></script> <style>.selected {background-color: #DFF0D8;}#example_length {float: left;}.odd td strong {color: red;}#deleteButton {float: left;}#addButton {float: left;}#topPlugin {float: left;margin-left: 10px;}.modal-footer span {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;float: left;font-size: 16px;}div.dataTables_paginate {margin: 0;white-space: nowrap;text-align: right;margin-top: 5px;}.table th, .table td { text-align: center; height:25px;}</style> </head><body><div style="height:20px;"></div><!-- 显示表格边框table-bordered 缩小表格间距table-condensed --><table id="example" class="table table-bordered table-condensed"><thead><tr><th><input type="checkbox" name="allChecked" /></th> <th>id</th> <th>部门名称</th> <th>部门备注</th> <th>状态</th> <th>创建时间</th> <th>操作</th> </tr> </thead></table><!--单个删除确认对话框--><div class="modal fade" id="deleteOneModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" > <!-- data-backdrop="static" 禁止点击弹框后面内容 --> <form class="form-horizontal" role="form"> <div class="modal-dialog modal-sm " > <!-- modal-sm 小的 modal-lg 大的 --> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 提示信息 </h4> </div> <div class="modal-body" style="text-align: left;"> <h5>您确定要删除当前信息吗？</h5> </div> <div class="modal-footer"> <!-- <button type="button" class="btn btn-default" data-dismiss="modal">取消 </button> --> <button type="button" class="btn btn-primary" id="delSubmit"> 确认 </button> </div> </div><!-- /.modal-content --> </div> </form></div><!--多个删除确认对话框--><div class="modal fade" id="deleteAllModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <form class="form-horizontal" role="form"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 提示信息 </h4> </div> <div class="modal-body" style="text-align: left;"> <h5>您确定要删除选中信息吗？</h5> </div> <div class="modal-footer"> <!-- <button type="button" class="btn btn-default" data-dismiss="modal">取消 </button> --> <button type="button" class="btn btn-primary" id="delAllSubmit"> 确认 </button> </div> </div><!-- /.modal-content --> </div> </form></div><!--新增页面开始--><div class="modal fade" id="myModal-add-info" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> <h4 class="modal-title" id="myModalLabel"> 新 增 </h4> </div> <form class="form-horizontal" role="form" action="/category_add" method="post" id="category_add"> <div class="modal-body"> <%-- <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" >图 片：</label> <div class="col-sm-5"> <input type="file" name="img1" class="file" id="img1" style="width:180px; float: left" /> </div> <div class="col-sm-3"> <input class="btn btn-sm btn-info" type="button" value="上传" id="uploadimg"/><span id="t"></span> </div> <input name="categoryImg" type="hidden" id="imageUrl" /> </div> --%> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" >部门名称： </label> <div class="col-sm-9"> <input type="text" class="form-control" id="typename" name="name" style="width: 250px" maxlength="15" placeholder="10个汉字以内" /> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" >备注： </label> <div class="col-sm-9"> <input type="text" class=" sortNumber form-control" name="sortNumber" id="sortNumber" style="width: 250px" maxlength="3"/> </div> </div> <div class="form-group"> <label class="col-sm-3 control-label no-padding-right" >状态：</label> <div class="control-group"> <div class="radio col-sm-3" style="float: left"> <label> <input type="radio" class=" yn1" name="isYn" value="1" checked/> <span class="lbl">有效</span> </label> </div> <div class="radio col-sm-3" style="float: left"> <label> <input type="radio" class=" yn1" name="isYn" value="0"/> <span class="lbl">无效</span> </label> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭 </button> <button type="button" class="btn btn-primary" id="btnsubmit">提交 </button> </div> </form> </div><!-- /.modal-content --> </div> </div><script>$(function() {var table = $("#example").DataTable({"aLengthMenu":[10,20,40,60], //动态指定分页后每页显示的记录数。"searching":false,//禁用搜索"lengthChange":true, //是否启用改变每页显示多少条数据的控件"sort" : "position", //是否开启列排序，对单独列的设置在每一列的bSortable选项中指定"deferRender":true,//延迟渲染"bStateSave" : false, //在第三页刷新页面，会自动到第一页"iDisplayLength" : 10, //默认每页显示多少条记录"iDisplayStart" : 0,"ordering": false,//全局禁用排序"dom": '<l<\'#topPlugin\'>f>rt<ip><"clear">',"ajax": { "type": "POST", "url":'<%=request.getContextPath()%>/datatables/listceshidepar.do', },"aoColumns" : [{ //aoColumns设置列时，不可以任意指定列，必须列出所有列。"mData" : "id","orderable": false , // 禁用排序"sDefaultContent" : "","sWidth" : "2%" },{"mData" : "id","orderable" : false, // 禁用排序"sDefaultContent" : "","sWidth" : "6%",}, {"mData" : "deptname","orderable" : false, // 禁用排序"sDefaultContent" : "","sWidth" : "10%"}, {"mData" : "remark","orderable" : false, // 禁用排序"sDefaultContent" : "","sWidth" : "10%"},{"mData" : "state","orderable" : false, // 禁用排序"sDefaultContent" : "","sWidth" : "3%","render" : function(data, type, full, meta) {if(data==1){ data ="<a href='#' class='upOrderStatus' data-id="+full.id+">有效</a>";}else{ data ="<a href='#' class='upOrderStatus' data-id="+full.id+"><font color='red'>无效</font></a>";}return data;}},{"mData" : "createtime","orderable" : false, // 禁用排序"sDefaultContent" : "","sWidth" : "10%","render" : function(data, type, full, meta) {//时间格式化return moment(data).format("YYYY-MM-DD HH:mm:ss");}},{"mData" : "id","orderable" : false, // 禁用排序"sDefaultContent" : '',"sWidth" : "10%", "render":function(data, type, full, meta){ returndata='<button id="deleteOne" class="btn btn-danger btn-sm" data-id='+data+'>删 除</button>'; }}],"columnDefs" : [{"orderable" : false, // 禁用排序"targets" : [0], // 指定的列"data" : "id","render" : function(data, type, full, meta) {return '<input type="checkbox" value="'+ data + '" name="id"/>';}}],"oLanguage" : { // 国际化配置"sProcessing" : "正在获取数据，请稍后...","sLengthMenu" : "显示 _MENU_ 条","sZeroRecords" : "没有找到数据","sInfo" : "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条","sInfoEmpty" : "记录数为0","sInfoFiltered" : "(全部记录数 _MAX_ 条)","sInfoPostFix" : "","sSearch" : "搜索","sUrl" : "","oPaginate" : {"sFirst" : "第一页","sPrevious" : "上一页","sNext" : "下一页","sLast" : "最后一页"}},initComplete:initComplete,drawCallback: function( settings ) { $('input[name=allChecked]')[0].checked=false;//取消全选状态 }});/** * 表格加载渲染完毕后执行的方法 * @param data */ function initComplete(data){ //删除用户按钮的HTMLDOM var topPlugin='<button class="btn btn-danger btn-sm" id="deleteAll">删除</button> <button class="btn btn-primary btn-sm addBtn" >新 增</button>' ; $("#topPlugin").append(topPlugin);//在表格上方topPlugin DIV中追加HTML } /** * 单行删除按钮点击事件响应 */ $(document).delegate('#deleteOne','click',function() { var id=$(this).data("id"); $("#delSubmit").val(id); $("#deleteOneModal").modal('show'); }); /** * 点击确认删除按钮 */ $(document).delegate('#delSubmit','click',function(){ var id=$(this).val(); $('#deleteOneModal').modal('hide'); $.ajax({ /* 后台未实现 */ url:contextPath+"delete.do?id="+id, async:true, type:"GET", dataType:"json", cache:false, //不允许缓存 success: function(data){ var obj = eval(data); if(obj.code==1) { window.location.reload(); } else { alert("删除失败"); } }, error:function(data){ alert("请求异常"); } }); }); /** * 多选选中和取消选中,同时选中第一个单元格单选框,并联动全选单选框 */$('#example tbody').on('click', 'tr', function(event) {var allChecked=$('input[name=allChecked]')[0];//关联全选单选框$($(this).children()[0]).children().each(function(){if(this.type=="checkbox" && (!$(event.target).is(":checkbox") && $(":checkbox",this).trigger("click"))){if(!this.checked){this.checked = true;addValue(this);var selected=table.rows('.selected').data().length;//被选中的行数console.info(selected+'个数');//全选单选框的状态处理var recordsDisplay=table.page.info().recordsDisplay;//搜索条件过滤后的总行数var iDisplayStart=table.page.info().start;// 起始行数if(selected === table.page.len()||selected === recordsDisplay||selected === (recordsDisplay - iDisplayStart)){allChecked.checked = true;}}else{this.checked = false;cancelValue(this);allChecked.checked = false;}}});$(this).toggleClass('selected');//放在最后处理，以便给checkbox做检测});/** * 全选按钮被点击事件 */$('input[name=allChecked]').click(function(){if(this.checked){$('#example tbody tr').each(function(){console.info(1);if(!$(this).hasClass('selected')){$(this).click();console.info(2);}});}else{$('#example tbody tr').click();}}); /** * 单选框被选中时将它的value放入隐藏域 */function addValue(para) {var userIds = $("input[name=userIds]");if(userIds.val() === ""){userIds.val($(para).val());}else{userIds.val(userIds.val()+","+$(para).val());}}/** * 单选框取消选中时将它的value移除隐藏域 */function cancelValue(para){//取消选中checkbox要做的操作var userIds = $("input[name=allChecked]");var array = userIds.val().split(",");userIds.val("");for (var i = 0; i < array.length; i++) {if (array[i] === $(para).val()) {continue;}if (userIds.val() === "") {userIds.val(array[i]);} else {userIds.val(userIds.val() + "," + array[i]);}}} /** * 新增 */ $(document).delegate('.addBtn','click',function() { $('#myModal-add-info').modal('show'); }); /** * 批量删除 */ $(document).delegate('#deleteAll','click',function() { var theArray=[]; $("input[name=id]:checked").each(function() { theArray.push($(this).val()); }); if(theArray.length<1){ alert("请至少选择一个"); }else{ alert(theArray); } }); });</script></body></html>完整Demo下载：http://download.csdn.net/detail/u011781521/9672451
1 0
- JQuery插件之-----Datatables(四)render与日期转换(moment.js)
- jquery插件之DataTables
- jquery插件之DataTables
- jquery插件之DataTables
- nodejs日期时间插件moment.js
- jQuery DataTables render简述
- jQuery DataTables render
- JQuery表格插件之Datatables
- Jquery插件之DataTables初探
- JQuery插件之-----Datatables(三)Datatables实现多选框与AJAX返回数据
- JQuery dataTables插件中文无法转换问题
- jquery插件之DataTables 详细参数说明
- jquery.datatables.js表格编辑与删除
- jQuery 的插件 dataTables
- jquery插件dataTables
- Jquery 表格插件DataTables
- jQuery datatables插件
- jquery dataTables插件详解
- LeetCode 299. Bulls and Cows
- 计算机键盘快捷键用法
- 51nod 1305 Pairwise Sum and Divide
- Hdu 4008 Parent and son(给你一棵树(n<=1e5),有Q次查询,每次输入X Y,意思是以X为根,输出Y的儿子节点中节点标号最小和子树中标号最小)
- 洛谷3376 网络最大流
- JQuery插件之-----Datatables(四)render与日期转换(moment.js)
- 51nod 1315 合法整数集
- C语言链式结构表2
- Gym - 101142F Folding（折半）
- 51nod 1316 回文矩阵
- php处理我的关注和关注我的
- 51nod 1319 跳跃游戏
- Android NDK for Eclipse
- Java经典算法（四）
