list3.jsp 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!doctype html>
  4. <html>
  5. <head>
  6. <%@ include file="../../common/head.jsp"%>
  7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  8. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  9. <meta name="keywords" content="" />
  10. <meta name="description" content="" />
  11. <link href="../res/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet" />
  12. <script src="../res/js/plugins/jeditable/jquery.jeditable.js" type="text/javascript"></script>
  13. <script src="../res/js/plugins/dataTables/jquery.dataTables.js" type="text/javascript"></script>
  14. <script src="../res/js/plugins/dataTables/dataTables.bootstrap.js" type="text/javascript"></script>
  15. </head>
  16. <body class="gray-bg">
  17. <div class="wrapper wrapper-content animated fadeInRight">
  18. <div class="row">
  19. <div class="col-sm-12">
  20. <div class="ibox float-e-margins">
  21. <!-- <div class="ibox-title"> -->
  22. <!-- <h5>基本 </h5> -->
  23. <!-- </div> -->
  24. <div class="ibox-content">
  25. <button class="btn btn-primary " type="button"><i class="fa fa-check"></i>&nbsp;提交</button>
  26. <table class="table table-striped table-bordered table-hover dataTables-example">
  27. <thead>
  28. <tr>
  29. <th></th>
  30. <th>菜单id</th>
  31. <th>菜单名称</th>
  32. </tr>
  33. </thead>
  34. <tbody>
  35. <tr>
  36. <td>2</td>
  37. <td>3</td>
  38. <td>4</td>
  39. </tr>
  40. </tbody>
  41. </table>
  42. </div>
  43. </div>
  44. </div>
  45. </div>
  46. </div>
  47. <script>
  48. $(document).ready(function () {
  49. $('.dataTables-example').dataTable({
  50. // "sAjaxSource":"2.txt"
  51. "bLengthChange": false, //改变每页显示数据数量
  52. "bFilter": false, //过滤功能
  53. "bSort":false,
  54. "iDisplayLength":12,
  55. "ajax":'list2.cs',
  56. "bServerSide": true,
  57. "select": true,//
  58. // "aoColumns": [
  59. // { "mDataProp": "id" },
  60. // { "mDataProp": "name" },
  61. // ],
  62. 'columns':[
  63. {
  64. className: "td-checkbox",
  65. orderable : false,
  66. bSortable : false,
  67. data : null,
  68. render : function(data, type, row, meta) {
  69. var content = '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">';
  70. content += ' <input type="checkbox" class="group-checkable" value="' + data + '" />';
  71. content += ' <span></span>';
  72. content += '</label>';
  73. return content;
  74. }
  75. },
  76. {'data':'id'},
  77. {'data':'name'}
  78. ],
  79. // 'columnDefs': [{
  80. // 'targets': 0,
  81. // 'searchable':false,
  82. // 'orderable':false,
  83. // 'className': 'dt-body-center',
  84. // 'data':null,
  85. // 'render': function (data, type, full, meta){
  86. // return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
  87. // }
  88. // }],
  89. //$_GET['sColumns']将接收到aoColumns传递数据
  90. });
  91. });
  92. </script>
  93. </body>
  94. </html>