基於DataTables的資料操作demo
後臺管理資料的話，常常會用到編輯和刪除改行資料。這裡基於datatables，做一組demo。
- Table Demo
<table id="table_comments_log" class="table table-striped table-bordered table-hover table-condensed" style="width:100%;">
<thead>
<tr>
<th style="text-align: center;">ID</th>
<th style="text-align: center;">員工編號</th>
<th style="text-align: center;">微信暱稱</th>
<th style="text-align: center;">員工姓名</th>
<th style="text-align: center;">所在門店編號</th>
<th style="text-align: center;">所在門店名稱</th>
<th style="text-align: center;">客戶微信頭像/暱稱</th>
<th style="text-align: center;">評價內容</th>
<th style="text-align: center;">評價星級</th>
<th style="text-align: center;">狀態</th>
<!-- <th style="text-align: center;">建立時間</th> -->
<th style="text-align: center;">更新時間</th>
<th style="text-align: center;">備註</th>
<th style="text-align: center;">操作</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
<!-- <tr class="kaensoft_tr">
</tr> -->
</table>
- 資料的渲染方法 ( 包括編輯和刪除按鈕的整合 )
// 初始化表格
var tables_comments = jQuery('#table_comments_log').DataTable({
// dom:"lrtip", // 隱藏掉自己的搜尋框
order: [[ 10, "desc" ]],
serverSide:true,
processing:true, // 開啟資訊提醒
language: {
url: 'http://static.wxkydd.com/libs/datatable/1.10.11/Chinese.json'
},
ajax: {
type:'GET',
url: "<?php echo site_url();?>/xk-api/hk/v1/reward/back/comment",
// dataSrc:'data', 指定服務端返回的資料來源
// success:function(res){ 調服務端返回的資料來源
// console.log(res);
// }
},
// 這裡為表格繫結資料
"columns": [
{ data : 'id'},
{ data : 'employee_display_name'},
{ data : 'employee_wx_headimg', // 對服務端返回的資料進行修改（e.g. 1男 2 女）
render:function( data, type, full, meta ){
return '<img class="wxhead" width="30px" src="' +
data + '"><span>' + full.employee_wx_nickname + '</span>';
}
},
{ data : 'employee_realname'},
{ data : 'employee_store_id'},
{ data : 'employee_store_name'},
{ data : 'customer_wx_headimg',
render:function( data, type, full, meta ){
return '<img class="wxhead" width="30px" src="' +
data + '"><span>' + full.customer_wx_nickname + '</span>';
}
},
{ data : 'comment_content',
render: function(data,type){
// if( data.length > 10){
// return data.substr(0,10)+ "......";
// }else{
return data;
// }
}
},
{ data : 'serve_stars'},
{ data : 'status',
render: function(data,type){
if(data == 0){
return '隱藏';
}else{
return '顯示';
}
}
},
// { data : 'create_date'},
{ data : 'update_date'},
{ data : 'remark'},
{ data : null // 留空給 操作一行用
}
],
columnDefs:[{ // http://datatables.club/reference/option/columnDefs.html
targets: 12,
render: function (data, type, row, meta) {
var html = '';
html += '<a type="button" id="editrow" class="btn btn-info btn-block btn-sm editrows" href="#" >編輯</a>';
html += '<a type="button" id="delrow" class="btn btn-danger btn-block btn-sm" href="#" >刪除</a>'
return html;
}
},
{ "orderable": false, "targets": 12 },
]
})
// 這個是多過濾
- 刪除的模態框隱藏/顯示的控制
// 顧客評價資料刪除
jQuery('#table_comments_log tbody').on( 'click', 'a#delrow', function () {
var data = tables_comments.row( jQuery(this).parents('tr') ).data();
var id = data.id;
jQuery('#url').val( id );
jQuery("#delcfmModel").modal("show");
});
- 刪除的模態框（拷自百度）
<!-- 刪除的模態框 -->
<div class="modal fade" id="delcfmModel">
<div class="modal-dialog">
<div class="modal-content message_align">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title btn-danger">提示資訊</h4>
</div>
<div class="modal-body">
<p>確定刪除後,該條資料將不可恢復,是否真的要繼續？</p>
</div>
<div class="modal-footer">
<input type="hidden" id="url"/>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
<a id="delSubmit" class="btn btn-success" data-dismiss="modal">確定</a>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
- 刪除api實現
jQuery('#delSubmit').click(function(){
// 拿到隱藏的input的id值
var id = jQuery('#url').val();
jQuery.ajax({
// processing:true, // 開啟資訊提醒
url: "Your delete api,
type: 'DELETE',
dataType: 'json',
data: {
},
// success:function(res){
// console.log(res);
// }
})
.done(function(data) {
// console.log(data.items)
if (data.code == 0) {
// alert("刪除成功")
// 重繪
tables_comments.ajax.reload();
};
})
.fail(function() {
alert("error");
});
})
刪除做完了，修改就都知道了吧，貼下刪除的介面傳參。
//顧客的評價修改頁面
jQuery('#comment-edit-sure').click(function(){
// 獲取使用者輸入的資訊
var id = jQuery('#comment-id').val();
var comment_status = (jQuery('#comment-status').val() == "顯示")?'1':'0';
var comment_remark = jQuery('#comment-remark').val();
// console.log( id+comment_status+comment_remark )
jQuery.ajax({
url: "<?php echo site_url();?>/xk-api/hk/v1/reward/back/" + id,
type: 'PUT',
dataType: 'json',
data: {
// id:id, Your data
status:comment_status,
remark:comment_remark
},
})
.done(function(data) {
// console.log(data)
jQuery("#myModal").modal("hide");
if (data.items != false) {
tables_comments.ajax.reload();
}else{
//console.log(data)
};
})
.fail(function() {
alert("error");
});
})
還不是美滋滋
相關文章
- 【Python】基於pymysql的資料庫操作類PythonMySql資料庫
- Jquery datatables 過載資料方法jQuery
- 關於dva框架的簡單操作以及demo框架
- 基於MySQL Adapter完成資料的增刪和修改操作MySqlAPT
- 基於SpringBoot的策略模式demoSpring Boot模式
- 基於java的RSS線上訂閱demoJava
- SQLite Helper類，基於.net c#的SQLite資料庫操作類SQLiteC#資料庫
- 使用 jQuery dataTables - 2 四種資料來源jQuery
- 一個基於Android的MVP框架DemoAndroidMVP框架
- 基於jwSMTP的C++傳送Email的DemoC++AI
- 基於VPD的資料管理
- php基於redis的list型資料結構實現ip限流操作PHPRedis資料結構
- Jquery Datatables (2) 動態載入資料型別jQuery資料型別
- Pyspark資料基礎操作集合Spark
- MongoDB資料庫基礎操作MongoDB資料庫
- 關於SqlServer資料表操作SQLServer
- .NET關於資料庫操作的類-囊括所有的操作資料庫
- MVC3學習：基於ObjectContext的資料增刪改查操作MVCObjectContext
- 基於資料塊的恢復
- 關於流資料上的事務操作
- 關於操作失誤的資料修復
- 資料庫——基礎（資料庫操作，表格操作）——增加高階查詢資料庫
- 關於資料庫操作多個操作組合的處理資料庫
- Mybatis批量操作demoMyBatis
- 基於ThinkPHP5.0+GatewayWorker寫的一個聊天DEMOPHPGateway
- 【MM】基於收貨的發票校驗Bapi DemoAPI
- 基於 canvas 實現的一個截圖小 demoCanvas
- Mysql資料庫基礎操作命令MySql資料庫
- 一個spark清洗資料的demoSpark
- 基於 Spark 的資料分析實踐Spark
- 基於Kerberos的大資料安全方案ROS大資料
- 基於PMEM的PG資料庫Memhive資料庫Hive
- 基於Prometheus的資料庫監控Prometheus資料庫
- 基於cancel的資料庫恢復資料庫
- 資料庫基於版本的閃回資料庫
- 資料庫開發（19）基於物件的資料庫資料庫物件
- 關於資料庫操作的封裝程式碼資料庫封裝
- 對於JDBC資料庫的初始化操作JDBC資料庫