首页 > 代码库 > JQuery dataTable 扩展+Ajax Post，Get一些基本操作（二）

JQuery dataTable 扩展+Ajax Post，Get一些基本操作（二）

2024-08-02 22:44:20   211人阅读

简单的小demo ，， 主要是讲如何在dataTable 中 进行 行 的编辑， 如做delete，edit ，等操作的时候  如何获取 改行的一些主要数据。

 1  <div class="col-md-12"> 2                 <div class="panel-body"> 3                     @*<div class="table-responsive">*@                     4                         <table id="tabRole" class="display responsive nowrap" border="0" cellspacing="0" width="100%"> 5                             <thead> 6                                 <tr> 7                                     <th><div align="center">Department</div></th> 8                                     <th><div align="center">NAME</div></th> 9                                     <th><div align="center">USER ID</div></th>10                                     <th><div align="center">NRIC/FIN</div></th>11                                     <th><div align="center">Organization</div></th>12                                     <th><div align="center">Designation</div></th>13                                     <th><div align="center">Role</div></th>14                                     <th></th>15                                     @*<th>IsDeleted</th>*@16                                 </tr>17                             </thead>18                         </table>19                         @*</div>*@                    20                 </div>21             </div>
View Code
  1 <script type="text/javascript">  2     var url = "";  3     $(document).ready(function () {  4         var adminGrid = $(‘#tabRole‘).DataTable({  5             responsive: true,  6             "sAjaxSource": "@Url.Content("~/Admin/GetUserList")",  7             ‘iDisplayLength‘: 10,  8             //"sScrollX": "100%",  9             //"sScrollXInner": "100%", 10             //"bScrollCollapse": true, 11             "serverSide": true, 12             ‘bPaginate‘: true, 13             "bLengthChange": false, 14             "bSort": false, 15             "bFilter": false, 16             "oLanguage": { 17                 "sZeroRecords": "NO Records for Table", 18                 "sEmptyTable": "NO Records for Table", 19             }, 20             "aoColumnDefs": [ 21                 { 22                     "render": function (data, type, full) { 23                         return ‘<div align="center">‘ + full.Department + ‘</div>‘; 24                     }, 25                     "targets": 0 26                 }, 27                 { 28                     "render": function (data, type, full) { 29  30                         return ‘<div align="center"><a href="http://www.mamicode.com/‘ + ‘@Url.Content("~/Admin/EditUser")‘ + ‘?userid=‘ + full.UserId + ‘">‘ + full.FullName + ‘</a></div>‘; 31                     }, 32                     "targets": 1 33                 }, 34                 { 35                     "render": function (data, type, full) { 36  37                         return ‘<div align="center">‘ + full.AdId + ‘</div>‘; 38                     }, 39                     "targets": 2 40                 }, 41                 { 42                     "render": function (data, type, full) { 43  44                         return ‘<div align="center">‘ + full.Nric + ‘</div>‘; 45                     }, 46                     "targets": 3 47                 }, 48                 { 49                     "render": function (data, type, full) { 50  51                         return ‘<div align="center">‘ + full.AgencyId + ‘</div>‘; 52                     }, 53                     "targets": 4 54                 }, 55                 { 56                     "render": function (data, type, full) { 57  58                         return ‘<div align="center">‘ + full.Designation + ‘</div>‘; 59                     }, 60                     "targets": 5 61                 }, 62                 { 63                     "render": function (data, type, full) { 64  65                         return ‘<div align="center">‘ + full.RoleName + ‘</div>‘; 66                     }, 67                     "targets": 6 68                 }, 69             ], 70             ‘aoColumns‘: [ 71                     { "mData": null }, 72                     { "mData": null }, 73                     { "mData": null }, 74                     { "mData": null }, 75                     { "mData": null }, 76                     { "mData": null }, 77                     { "mData": null }, 78                     { "defaultContent": "<div align=‘center‘><input id=‘btnDelete‘ class=‘btnDel btn btn-danger‘ type=‘button‘ value=http://www.mamicode.com/‘Delete‘/>
" }, 79 ] 80 }); 81 $("#tabRole tbody").on(‘click‘, ‘.btnDel‘, function () { 82 var data = http://www.mamicode.com/adminGrid.row($(this).parents(‘tr‘)).data(); 83 var userId = data["UserId"]; 84 var AdId = data["AdId"]; 85 if (userId != null & userId != "") { 86 $.ajax({ 87 type: ‘POST‘, 88 url: "@Url.Content("~/Admin/deleteUser")", 89 dataType: "json", 90 data: { 91 userId: userId, 92 AdId: AdId 93 }, 94 success: function (data, status) { 95 if (data =http://www.mamicode.com/="OK") { 96 $("#tabRole").DataTable().ajax.reload(); 97 } 98 else if (data =http://www.mamicode.com/="No") { 99 alert("delete failed");100 }101 else if (data =http://www.mamicode.com/="Error")102 {103 alert("Do not delete own records");104 }105 else {106 alert(data);107 }108 }109 })110 }111 else {112 alert("Please click delete Again");113 }114 }) 115 });116 117 function Search() {118 var userId=$(‘#AdId‘).val();119 var Nric=$(‘#Nric‘).val();120 var Department=$(‘#Department‘).val();121 var FullName=$(‘#FullName‘).val();122 if (userId == "" && Nric == "" && Department == "" && FullName == "") {123 $("#tabRole").DataTable().ajax.reload();124 }125 else126 {127 $.ajax({128 type: ‘POST‘,129 url: "@Url.Content("~/Admin/SearchUser")",130 dataType: "json",131 data: {132 userId: userId,133 Nric: Nric,134 Department: Department,135 FullName: FullName136 },137 success: function (data, status)138 {139 if (data =http://www.mamicode.com/="OK")140 {141 $("#tabRole").DataTable().ajax.reload();142 }143 }144 })145 }146 }147 148 </script>
JavaScript Code
 1 public JsonResult deleteUser(string userId,string AdId) 2         { 3             if(!string.IsNullOrEmpty(userId)) 4             { 5                 if (AdId == this.ApplicationContext.UserName) 6                 { 7                     return Json("Error", JsonRequestBehavior.AllowGet); 8                 } 9                 else10                 {11                     IcUsers user = this.ServiceLocator.GetService<IAppUserService>().GetUserById(userId);12                     user.IsDeleted = userId;13                     user.TransactionId = Guid.NewGuid().ToString();14                     user.LastUpdatedBy = this.ApplicationContext.UserName;15                     var result = this.ServiceLocator.GetService<IAppUserService>().DeleteUser(user);16                     if (result)17                     {18                         return Json("OK", JsonRequestBehavior.AllowGet);19                     }20                     else21                     {22                         return Json("No", JsonRequestBehavior.AllowGet);23                     }24                 }25             }26             else27             {28                 return Json("Please click delete Again", JsonRequestBehavior.AllowGet);29             }30         }
JsonResult Code

感觉看似简单的 一个table，， 刚入门的时候 还是花费了很多时间和精力， 就不详细讲每个Jquery  function的作用啊。。

 

附带DataTable 前面 每一行 用checkbox 操作 时候 Jquery  如何取选中值代码。

 1 function del() { 2             var UserId = ""; 3             $(‘.userCheck‘).each(function () { 4                 if (this.checked == true) { 5                     UserId += $(this).attr(‘value‘) + ‘,‘ 6                 } 7             }) 8             if (UserId != "") { 9                 if (confirm(‘@Messages.General.DeleteConfirm.Format()‘)) {10                     $(‘#ChooseUserId‘).val(UserId);11                 }12                 else {13                     return false;14                 }15             }16             else {17                 alert("@Messages.General.OperationConfirm.Format("User","Delete")");18                 return false;19             }20         }
JavaScript Code

样式不是很好，，  可以自己调整。 respose：true； 这句话 大家可以参考 DataTable 官网 。 效果感觉还是很不错。

 

JQuery dataTable 扩展+Ajax Post，Get一些基本操作（二）


联系
我们