Jquery.datatables 学习笔记之综述
来源:互联网 发布:淘宝怎么宝贝发布不了 编辑:程序博客网 时间:2024/05/21 14:53
1、js部分,datatables最重要的部分就在js的输出,除了table框架,都要用js控制,代码如下:
<script type="text/javascript">$(document).ready(function() {var lastIdx = null;var table = $('#itTable').DataTable( {"bStateSave": true,//保存客户端搜索条件等状态"sPaginationType": "full_numbers",//出现首页、尾页"aLengthMenu": [[10, 25, 50,100, -1], ["10条", "25条", "50条","100条", "所有"]],"oLanguage" : {//修改语言"bAutoWith": true,"sProcessing": "正在加载中......", "sLengthMenu": "每页显示 _MENU_ 条记录", "sZeroRecords": "对不起,查询不到相关数据!", "sEmptyTable": "表中无数据存在!", "sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录", "sInfoEmpty" : "0 / 0", "sInfoFiltered": "数据表中共为 _MAX_ 条记录", "sSearch": "搜索", "oPaginate": { "sFirst": "首页", "sPrevious": "上一页", "sNext": "下一页", "sLast": "末页"}},"ajax": {"url": "<%=path %>/main/virtual/list","dataType": "json"},"columns": [{ "data": "id" ,orderable: false,"class":"displayNone"},{ "data": "所在物理机" },{ "data": "虚拟机名称" },{ "data": "IP" },{ "data": "系统" },{ "data": "内存" },{ "data": "使用人" },{ "data": "创建时间" },{ "data": "终止时间" },{ "data": "状态" },{ "data": "1级部门" },{ "data": "2级部门"},{ "data": "备注" },{ "data": null,orderable: false,/* "mRender":function(data,type,full){//通过回调函数添加button按钮return "<input type='button' onclick='' value='"+data+"'/>";} */},],/* "columnDefs": [//可以隐藏某列 { "targets": [ 0 ], "visible": false, "searchable": false, }, { "targets":[3], "render":function(data,type,row){ return data+"("+row[3]+")"; } },], */dom: 'T<"clear">lfrtip',//自定义布局 tableTools: { "sRowSelect": "os",//选中行高亮 "aButtons": [//导出等功能 "copy", "print",<code class="js spaces"></code><code class="js plain"> {</code><div class="line number9 index8 alt2"><code class="js spaces"> </code><code class="js string">"sExtends"</code><code class="js plain">: </code><code class="js string">"collection"</code><code class="js plain">,</code></div><div class="line number10 index9 alt1"><code class="js spaces"> </code><code class="js string">"sButtonText"</code><code class="js plain">: </code><code class="js string">"Save"</code><code class="js plain">,</code></div><div class="line number11 index10 alt2"><code class="js spaces"> </code><code class="js string">"aButtons"</code><code class="js plain">: [ </code><code class="js string">"csv"</code><code class="js plain">, </code><code class="js string">"xls"</code><code class="js plain">, </code><code class="js string">"pdf"</code> <code class="js plain">]</code></div><div class="line number12 index11 alt1"><code class="js spaces"> </code><code class="js plain">}</code></div> ], "sSwfPath": "<%=path%>/swf/copy_csv_xls_pdf.swf" ,//配合aButtons }, "fnRowCallback":function(nRow,aData,iDataIndex){ //回调该行 配合columns使用实现自定义button var id = $('td', nRow).eq(0).text(); var ip = $('td', nRow).eq(3).text(); $('td:eq(-1)',nRow).html('<a class="updateRow">修改</a> '+ '<a class="delRow" >删除</a>'); return nRow; }, "createdRow": function ( row, data, index ) {// 初始化行时对数据进行过滤 if ( new Date() >= new Date($('td', row).eq(8).text()) && $('td', row).eq(9).text() =='开机' ) { $('td', row).eq(8).addClass('fontLight'); } },} );$('#itTable tbody').on( 'click', 'a.updateRow', function () {//点击事件 a.delRow css选择器delrow为classvar id = $('td', $(this).parents('tr')).eq(0).text();var ip = $('td', $(this).parents('tr')).eq(3).text();window.open('<%=path%>/main/virtual/updateview?id='+id+'&ip_address='+ip+'&t_name=虚拟机', 'newwindow','width=700,height=500,top=150, left=350, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');});$('#itTable tbody').on( 'click', 'a.delRow', function () {//点击事件 a.delRow css选择器delrow为class// 获取行及删除行/* var tr = $(this).parents('tr');var row = table.row(tr);row.remove().draw();table.row('.selected').remore().draw(); */var id = $('td', $(this).parents('tr')).eq(0).text();if(confirm('删除不可恢复,确定删除吗?')){$.ajax({ type: "POST", url: "<%=path%>/main/virtual/del?id="+id, //data: {id:$("#id").val(), title:$("#title").val(),title_en:$("#title_en").val()}, dataType: "html", success: function(data){window.location.href=window.location.href; }, error:function(data){ alert('删除错误'); } });}} ); //鼠标移动高亮显示/* $('#itTable tbody').on( 'mouseover', 'td', function () { var colIdx = table.cell(this).index().column; if ( colIdx !== lastIdx ) { $( table.cells().nodes() ).removeClass( 'highlight' ); $( table.column( colIdx ).nodes() ).addClass( 'highlight' ); } } ).on( 'mouseleave', function () { $( table.cells().nodes() ).removeClass( 'highlight' ); } ); */new $.fn.dataTable.FixedHeader( table );// 顶部固定不动} );</script>
2、html方面很简单,如下:
<table id="itTable" class="display dataTables" cellspacing="0" width="100%" align="center" ><thead ><tr><th>id</th><th >所在物理机</th><th >虚拟机名称</th><th >IP</th><th >系统</th><th >内存</th><th >使用人</th><th >创建时间</th><th >终止时间</th><th >状态</th><th >1级部门</th><th >2级部门</th><th >备注</th><th >操作</th></tr></thead></table>
0 0
- Jquery.datatables 学习笔记之综述
- Jquery.datatables 学习笔记之综述
- Jquery.datatables 学习笔记
- Jquery.datatables 学习笔记之自定义button按钮
- 【JQuery,前端】jquery datatables 学习笔记
- Datatables学习笔记--jquery表格插件
- JQuery DataTables的学习笔记整理
- Jquery DataTables自学笔记 之 自定义布局
- Jquery DataTables自学笔记 之 自定义布局
- jQuery控件 ---DataTables 学习
- jQuery控件 ---DataTables 学习
- jQuery控件 ---DataTables 学习
- jquery.dataTables学习
- JQuery DataTables学习
- jquery插件之DataTables
- jquery插件之DataTables
- jquery插件之DataTables
- Jquery DataTables自学笔记 之 基本设置的中文注解
- sql的while
- C# 连接SQL Server数据库的几种方式--server+data source等方式
- JavaScript的原生引用类型
- jquery制作折叠式菜单(Accordion)
- 使用openssl实现md5加密
- Jquery.datatables 学习笔记之综述
- 【C语言复习(六)】隐式类型转换相关分析
- Gson转Map
- .net常用的验证正则表达式
- 《Linux设备驱动开发详解》-- Linux 中断编程
- C/C++的64位整型输入输出
- 黑马程序员--编程基础II--
- 安装memcached
- 01-java数据类型与语句