簡易版dataTable,包含增刪改查、統計
阿新 • • 發佈:2019-02-16
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="public/css/bootstrap.css" rel="stylesheet"> <link href="public/css/bootstrap-theme.min.css" rel="stylesheet"> <link href="public/css/bootstrap-responsive.min.css" rel="stylesheet"> <script src="public/js/jquery-3.0.0.min.js"></script> <script src="public/js/bootstrap.min.js"></script> <style> .btn{border-radius:10px; } .table > tbody > tr > td,.table > tbody > tr > th{ vertical-align: middle; border-top: none; border-bottom: 1px solid #ddd; } </style> </head> <body> <div class="container" style="margin-top: 4rem; margin:0 auto;" id="container"> </div> <a href="urlValues.html?a=職稱&b=1">傳 參</a> <script src="public/js/dataTable.js"></script> <script> $('#container').dataTable({ search_area: [{type:'input',id:'search',placeholder:'請輸入教師編號或名稱'}], // 搜尋區 keyName: '教師', // 主要關鍵詞 table_style:'table-bordered table-hover table-striped', // table的bootstrap樣式 table_td:'center', // 每一個單元格居中 table_head: ['教師編號','教師名稱','教師性別','教師職稱','聯絡電話'], // 表頭名字 table_valueIndex: [ {type:'input',index:'t_id'}, // 每個td對應的標籤型別和json資料的索引值, {type:'input',index:'t_name'}, {type:'select',index:'t_sex',placeholder:'男,女'}, {type:'input',index:'job'}, {type:'input',index:'t_phone'} ], ajaxSource: 'json.txt', // 資料來源url addCommand: 'command=addData', // 資料來源的新增請求 deleteCommand:'command=deleteData', // 資料來源的刪除請求 modifyCommand:'command=modifyData', // 資料來源的修改請求 isEdit:true, // 是否啟動編輯 isDelete:true, // 是否啟動刪除 pagingCount: 10 // 資料每頁數量 }); </script> </body> </html>
修改:請大家把dataTable.js的318、319的兩行程式碼剪下到362行,也就是init裡面。有什麼疑問歡迎各位留言~