Datatables應用實例（極致精簡）

時間 2019-11-18

標籤 datatables 應用實例極致精簡简体版

原文原文鏈接

（僅供參考，不喜勿噴）

//附sql------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------css

 1 CREATE DATABASE Exams  2  3 USE Exams  4  5 CREATE TABLE datatables  6 (  7 ID INT PRIMARY KEY IDENTITY,  8 Name NVARCHAR(50),  9 Age NVARCHAR(50), 10 Sex NVARCHAR(50), 11 [Address] NVARCHAR(50), 12 Office NVARCHAR(50) 13 ) 14 DECLARE @i INT =0; 15 WHILE (@i<100) 16 BEGIN 17 18 INSERT dbo.datatables 19  ( Name, Age, Sex, Address, Office ) 20 VALUES ( N'楊'+CONVERT(NVARCHAR(50),@i) , -- Name - nvarchar(50) 21 N'5'+@i, -- Age - nvarchar(50) 22 N'0'+@i, -- Sex - nvarchar(50) 23 N'beiji'+CONVERT(NVARCHAR(50),@i), -- Address - nvarchar(50) 24 N'bangong'+CONVERT(NVARCHAR(50),@i) -- Office - nvarchar(50) 25  ) 26 SET @i=@i+1; 27 END

//前臺主界面----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------html

  1 <html>
  2 <head>
  3     <meta name="viewport" content="width=device-width" />
  4     <title>Index</title>
  5     @*<script src="~/DataTables-1.10.15/media/js/jquery.js"></script>*@
  6     <script src="~/jquery-1.8.2.min.js"></script>
  7     <link href="~/DataTables-1.10.15/media/css/jquery.dataTables.min.css" rel="stylesheet" />
  8     <script src="~/DataTables-1.10.15/media/js/jquery.dataTables.min.js"></script>
  9     <script src="~/layer-v3.0.3/layer/layer.js"></script>
 10 </head>
 11 <body>
 12     <div> 
 13         <input id="selname" /><input type="button" value="查詢" onclick="search()" />
 14         <div>
 15             <input type="button" value="添加" onclick="AddStudent()" />
 16             <table id="exec" class="display" cellspacing="0" width="100%">
 17                 <thead>
 18                     <tr>
 19                         <th>ID</th>
 20                         <th>Name</th>
 21                         <th>Age</th>
 22                         <th>Sex</th>
 23                         <th>Address</th>
 24                         <th>Office</th>
 25                         <th>操做</th>
 26                     </tr>
 27                 </thead>
 28 
 29                 <tfoot>
 30                     <tr>
 31                         <th>ID</th>
 32                         <th>Name</th>
 33                         <th>Age</th>
 34                         <th>Sex</th>
 35                         <th>Address</th>
 36                         <th>Office</th>
 37                         <th>操做</th>
 38                         
 39                     </tr>
 40                 </tfoot>
 41             </table>
 42         </div>
 43         </div>
 44     <script>
 45         function UpdateFromId(id)
 46         {
 47             layer.open({
 48                 type: 2,
 49                 area: ['40%', '80%'],
 50                 content: '/Default/UpdateFromId/' + id, end: function () { search(); }
 51 
 52             });
 53         }
 54         function AddStudent()
 55         {
 56             layer.open({
 57                 type: 2,
 58                 area: ['40%','80%'],
 59                 content: '/Default/AddStuden',
 60                 end: function () { search(); }
 61             });
 62              
 63 
 64         }
 65         function delFromID(id)
 66         {
 67             if (confirm("肯定要刪除嗎？")) 
 68             {
 69                 $.ajax({
 70 
 71                     url: "delectbyid/"+id,
 72                     type:"get",
 73                     success: function (data)
 74                     {
 75                         alert(data);
 76                         search();
 77                     }
 78                 });
 79             } 
 80         }
 81         search();
 82         function search() {
 83             $('#example').dataTable().fnClearTable();
 84 
 85             var datatable = $('#exec').dataTable({
 86                 "bStateSave": true,
 87                 "bJQueryUI": true,
 88                 "bPaginate": true,// 分頁按鈕  
 89                 "bInfo": true,// Showing 1 to 10 of 23 entries 總記錄數沒也顯示多少等信息  
 90                 "bWidth": true,
 91                 "bScrollCollapse": true,
 92                 "sPaginationType": "full_numbers", // 分頁，一共兩種樣式 另外一種爲two_button // 是datatables默認  
 93                 "bProcessing": true,
 94                 "bServerSide": true,                          
 95                 "bFilter": true, //過濾功能
 96                 "bAutoWidth": true,//自動寬度
 97                 "bDestroy": true,
 98                 "sScrollY": "100%",
 99                 "bSortCellsTop": true,
100                 "bLengthChange": true,
101                 "pageLength": 5, //每頁顯示多少條
102                 "serverSide": true,//服務端模式
103                 "paging": true, //是否顯示分頁
104                 "oLanguage": {
105                     "sLengthMenu": "每頁顯示 _MENU_條",
106                     "sZeroRecords": "沒有找到符合條件的數據",
107                     "sProcessing": "&lt;img src=’./loading.gif’ /&gt;",
108                     "sInfo": "當前第 _START_ - _END_ 條　共計 _TOTAL_ 條",
109                     "sInfoEmpty": "木有記錄",
110                     "sInfoFiltered": "(從 _MAX_ 條記錄中過濾)",
111                     "sSearch": "搜索：",
112                     "oPaginate": {
113                         "sFirst": "首頁",
114                         "sPrevious": "前一頁",
115                         "sNext": "後一頁",
116                         "sLast": "尾頁"
117                     }
118                 },
119 
120                  destroy: true,//--------------不能少，少了就不對
121                 ajax: {
122                     url: "Getdata",
123                     data: function (d) {           
124                         d.name = $("#selname").val();
125                     }
126                 },
127                 "columns":
128                     [
129                                 { "data": "ID" },
130                                 { "data": "Name" },
131                                 { "data": "Age" },
132                                 { "data": "Sex" },
133                                 { "data": "Address" },
134                                 { "data": "Office" },
135                                 { "data": "Caozuo" }
136 
137                     ]
138                 
139                 //"columnDefs":
140                 //    [{
141                 //        targets: 6,
142                 //        render: function (data, type, row, meta) {
143                 //            return '<input type="button"  onclick=delFromID(' + ID + ')  value="刪除" />';
144                 //        }
145                 //    },
146 
147                 //          { "orderable": false, "targets": 6},
148                 //    ],
149                     
150                 });
151 
152         }
153 
154 
155 
156 
157     </script>
158 </body>
159 </html>

 
 { 81 alert(data); 82 search(); 83 } 84 }); 85 } 86 } 87 search(); 88 function search() { 89 $('#example').dataTable().fnClearTable(); 90 91 var datatable = $('#exec').dataTable({ 92 "pageLength": 5, //每頁顯示多少條 93 "serverSide": true,//服務端模式 94 "paging": true, //是否顯示分頁 95 destroy: true,//--------------不能少，少了就不對 96 ajax: { 97 url: "Getdata", 98 data: function (d) { 99 d.name = $("#selname").val(); 100 } 101 }, 102 "columns": 103 [ 104 { "data": "ID" }, 105 { "data": "Name" }, 106 { "data": "Age" }, 107 { "data": "Sex" }, 108 { "data": "Address" }, 109 { "data": "Office" }, 110 { "data": "Caozuo" } 111 112 ] 113 114 //"columnDefs": 115 // [{ 116 // targets: 6, 117 // render: function (data, type, row, meta) { 118 // return '<input type="button" onclick=delFromID(' + ID + ') value="刪除" />'; 119 // } 120 // }, 121 122 // { "orderable": false, "targets": 6}, 123 // ], 124 125 }); 126 127 } 128 129 130 131 132 </script> 133 </body> 134 </html>

//添加界面------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------jquery

 1 @{  2 Layout = null;  3 }  4  5 <!DOCTYPE html>  6  7 <html>  8 <head>  9 <meta name="viewport" content="width=device-width" /> 10 11 <title>AddStuden</title> 12 <script src="~/bootstrap.min.js"></script> 13 <script src="~/jquery-1.8.2.min.js"></script> 14 </head> 15 <body> 16 <div style="margin:0 auto; width:auto; height:auto; margin-left:200px; margin-top:100px;" > 17 <form method="post" action="" enctype="multipart/form-data"> 18 <h1>添加學生</h1> 19 <table class="table-responsive" > 20 <tr><td>姓名：<input name="Name" /></td></tr> 21 <tr></tr> 22 <tr></tr> 23 <tr><td>年齡：<input name="Age" /></td></tr> 24 <tr></tr> 25 <tr></tr> 26 <tr><td>性別：<input name="Sex" /></td></tr> 27 <tr></tr> 28 <tr></tr> 29 <tr><td>住址：<input name="Address" /></td></tr> 30 <tr></tr> 31 <tr></tr> 32 <tr><td> 職務：<input name="Office" /></td></tr> 33 <tr></tr> 34 <tr></tr> 35 </table> 36 <input type="submit" value="添加" onclick="thisclear()"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="返回" onclick=" thisclear()"/> 37 </form> 38 </div> 39 <script> 40  function thisclear() 41  { 42 var index = parent.layer.getFrameIndex(window.name); 43  parent.layer.close(index); 44  } 45 </script> 46 </body> 47 </html>

//編輯界面------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ajax

 1 @{  2 Layout = null;  3 }  4  5 <!DOCTYPE html>  6 @model WebApplication1.Controllers.datatables  7 <html>  8 <head>  9 <meta name="viewport" content="width=device-width" /> 10 <title>UpdateFromId</title> 11 <script src="~/bootstrap.min.js"></script> 12 <script src="~/jquery-1.8.2.min.js"></script> 13 </head> 14 <body> 15 <div style="margin:0 auto; width:auto; height:auto; margin-left:200px; margin-top:100px;"> 16 <form method="post" action="" enctype="multipart/form-data"> 17 <h1>編輯信息</h1> 18 <table class="table-responsive"> 19 <tr style="display:none;"><td>編號：@Html.TextBoxFor(T => T.ID)</td></tr> 20 <tr></tr> 21 <tr></tr> 22 23 <tr><td>姓名：@Html.TextBoxFor(T=>T.Name)</td></tr> 24 <tr></tr> 25 <tr></tr> 26 <tr><td>年齡：@Html.TextBoxFor(T => T.Age)</td></tr> 27 <tr></tr> 28 <tr></tr> 29 <tr><td>性別：@Html.TextBoxFor(T => T.Sex)</td></tr> 30 <tr></tr> 31 <tr></tr> 32 <tr><td>住址：@Html.TextBoxFor(T => T.Address)</td></tr> 33 <tr></tr> 34 <tr></tr> 35 <tr><td> 職務：@Html.TextBoxFor(T => T.Office)</td></tr> 36 <tr></tr> 37 <tr></tr> 38 </table> 39 <input type="submit" value="保存" onclick="thisclear()" /> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="button" value="返回" onclick=" thisclear()" /> 40 </form> 41 </div> 42 <script> 43  function thisclear() 44  { 45 var index = parent.layer.getFrameIndex(window.name); 46  parent.layer.close(index); 47  } 48 </script> 49 </body> 50 </html>

//控制器------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------sql

  1 using System;  2 using System.Collections.Generic;  3 using System.Data;  4 using System.Data.SqlClient;  5 using System.Linq;  6 using System.Web;  7 using System.Web.Mvc;  8  9 namespace WebApplication1.Controllers  10 {  11 public class DefaultController : Controller  12  {  13 // GET: Default  14 public ActionResult Index()  15  {  16 return View();  17  }  18  [HttpGet]  19 public JsonResult Getdata(int draw, string name, int length = 5, int start = 0)  20  {  21 List<datatables> list = new List<datatables>();  22 int pagecount = 0;  23 using (SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=Exams;Integrated Security=True"))  24  {  25  conn.Open();  26 string sql = "select top ("+length+") * from datatables where Name like '%" + name + "%' and ID not in (select top ("+start+ ") ID from datatables where Name like '%" + name + "%' ) ";  27 SqlDataAdapter adp = new SqlDataAdapter(sql, conn);  29 SqlCommand cmd = new SqlCommand("select count(1) from datatables where Name like '%" + name + "%' ", conn);  30 pagecount = Convert.ToInt32(cmd.ExecuteScalar());  31 DataTable tb = new DataTable();  32  adp.Fill(tb);  35 foreach (DataRow item in tb.Rows)  36  {  37 datatables tbs = new datatables()  38  {  39  40 ID = Convert.ToInt32(item["ID"]),  41 Address = item["Address"].ToString(),  42 Age = item["Age"].ToString(),  43 Name = item["Name"].ToString(),  44 Office = item["Office"].ToString(),  45 Sex = item["Sex"].ToString(),  46 Caozuo = "<input type='button' onclick=delFromID("+ Convert.ToInt32(item["ID"]) + ") value='刪除' /> &nbsp;&nbsp;<input type='button' onclick=UpdateFromId(" + Convert.ToInt32(item["ID"]) + ") value='修改' />"  47  };  48  list.Add(tbs);  49  conn.Close();  50  }  52  }  54 var result = new  55  {  56 draw = draw, //客戶端惟一標識  57 recordsFiltered = pagecount,  58 recordsTotal = pagecount, //總行數 59 data = list 60 }; 61 return Json(result, JsonRequestBehavior.AllowGet); 62 } 63 64 public string delectbyid(int id) 65 { 66 int i = 0; 67 using (SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=Exams;Integrated Security=True")) 68 { 69 conn.Open(); 70 SqlCommand cmd = new SqlCommand("delete from datatables where ID="+id, conn); 71 i = Convert.ToInt32(cmd.ExecuteNonQuery()); 72 conn.Close(); 73 } 74 if (i==1) 75 { 76 return "刪除成功"; 77 } 78 else 79 { 80 return "刪除失敗"; 81 } 82 83 } 84 85 86 public ActionResult AddStuden() 87 { 88 89 return View(); 90 91 } 92 [HttpPost] 93 public ActionResult AddStuden(datatables s) 94 { 95 int i = 0; 96 using (SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=Exams;Integrated Security=True")) 97 { 98 conn.Open(); 99 string sql = string.Format("insert datatables values ('{0}','{1}','{2}','{3}','{4}')",s.Name,s.Age,s.Sex,s.Address,s.Office); 100 SqlCommand cmd = new SqlCommand(sql,conn); 101 i = Convert.ToInt32(cmd.ExecuteNonQuery()); 102 conn.Close(); 103 } 104 if (i == 1) 105 { 106 return View("Index"); 107 } 108 else 109 { 110 return Content("<script>alert('添加失敗');;</script>"); 111 } 112 113 } 114 115 116 public ActionResult UpdateFromId(int id) 117 { 118 datatables tbs = new datatables(); 119 using (SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=Exams;Integrated Security=True")) 120 { 121 #region 122 string sql = "select * from datatables where ID="+id; 123 SqlDataAdapter adp = new SqlDataAdapter(sql, conn); 124 DataTable tb = new DataTable(); 125 adp.Fill(tb); 126 foreach (DataRow item in tb.Rows) 127 { 128 tbs = new datatables() 129 { 130 131 ID = Convert.ToInt32(item["ID"]), 132 Address = item["Address"].ToString(), 133 Age = item["Age"].ToString(), 134 Name = item["Name"].ToString(), 135 Office = item["Office"].ToString(), 136 Sex = item["Sex"].ToString(), 137 Caozuo = "<input type='button' onclick=delFromID(" + Convert.ToInt32(item["ID"]) + ") value='刪除' /> &nbsp;&nbsp;<input type='button' onclick=UpdateFromId(" + Convert.ToInt32(item["ID"]) + ") value='修改' />" 138 }; 139 140 141 } 142 #endregion 143 return View(tbs); 144 } 145 146 } 147 [HttpPost] 148 public ActionResult UpdateFromId(datatables s) 149 { 150 151 int i = 0; 152 using (SqlConnection conn = new SqlConnection("Data Source=.;Initial Catalog=Exams;Integrated Security=True")) 153 { 154 conn.Open(); 155 string sql = string.Format("update datatables set Name='{0}',Age='{1}',Sex='{2}',Address='{3}',Office='{4}' where ID={5}", s.Name, s.Age, s.Sex, s.Address, s.Office,s.ID); 156 SqlCommand cmd = new SqlCommand(sql, conn); 157 i = Convert.ToInt32(cmd.ExecuteNonQuery()); 158 conn.Close(); 159 } 160 if (i == 1) 161 { 162 return Content("<script>alert('編輯成功');location.href='/Default/Index';</script>"); 163 } 164 else 165 { 166 return Content("<script>alert('編輯失敗');</script>"); 167 } 168 } 169 170 171 } 172 public class datatables 173 { 174 public int ID { get; set; } 175 public string Name { get; set; } 176 public string Age { get; set; } 177 public string Sex { get; set; } 178 public string Address { get; set; } 179 public string Office { get; set; } 180 181 public string Caozuo { get; set; } 182 } 183 }