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' οnclick='' 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为class
- var 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>