官方網站：http://datatables.club/example/
<!-- DataTables CSS -->css引入的
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.7/css/jquery.dataTables.css">
<!-- jQuery -->
<script type="text/javascript" charset="utf8" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="http://cdn.datatables.net/1.10.7/js/jquery.dataTables.js"></script>
1.先引入上面的文件
2.html寫上這些，th為表格的標題欄，可以自己定義好
<table id="table_id" class="display">
<thead>
<tr>
<th>xxx</th>
<th>xxx</th>
<th>xxx</th>
<th>xxx</th>
<th>xxx</th>
<th>xxx</th>
<th>xxx</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
3.開始初始化表格插件
$(document).ready( function () {
var tables=$('#table_id').DataTable({
"oLanguage": { //表格的語言設置
"sProcessing": "正在獲取數據，請稍后...",
"sLengthMenu": "顯示 _MENU_ 條",
"sZeroRecords": "沒有您要搜索的內容",
"sInfo": "從 _START_ 到 _END_ 條記錄 總記錄數為 _TOTAL_ 條",
"sInfoEmpty": "記錄數為0",
"sInfoFiltered": "(全部記錄數 _MAX_ 條)",
"sInfoPostFix": "",
"sSearch": "搜索",
"sUrl": "",
"oPaginate": {
"sFirst": "第一頁",
"sPrevious": "上一頁",
"sNext": "下一頁",
"sLast": "最后一頁"
}
},
"bProcessing" : true, //DataTables載入數據時，是否顯示‘進度’提示
// "serverSide": true,
"autoWidth":false,
//"sScrollY" : 350, //DataTables的高
"sPaginationType" : "full_numbers", //詳細分頁組，可以支持直接跳轉到某頁
"iDisplayStart": 0,//刷新插件后顯示的第幾頁（如果一頁為10條數據，填10就顯示第二頁）
"ajax":{
"url":"url地址"//輸入url地址
},
columns: [//定義接受到的數據，“key”
{ data: 'id' },
{ data: 'name' },
{ data: 'industry' },
{ data: 'source' },
{ data: 'location'},
{ data: 'serviceStatus'},
{ data : null}
],
'bStateSave': true,//配置好這個,刷新頁面會讓頁面停留在之前的頁碼
"columnDefs": [{
"targets": 6,//編輯
"data": null,//下面這行，添加了編輯按鈕和，刪除按鈕
"defaultContent": "<button id='editrow' class='btn btn-primary' type='button' style='margin-right:10px;'>編輯</button><button id='delrow' class='btn btn-primary' type='button'>刪除</button>"
}],
"createdRow": function( row, data, index ) {
//每加載完一行的回調函數
$('td', row).eq(5).css('font-weight',"bold").css("color","red");//獲取到具體行具體格的元素
}
});
－－－－－－－－－－－//以下為自定義的刪除按鈕事件，可以忽略，也可以參考寫法－－－－－－－－－－－－－－－－
$('#table_id tbody').on( 'click', 'button#delrow', function () {
var data = tables.row( $(this).parents('tr') ).data();
//tables.ajax.reload();重新獲取數據
//tables.draw(false);重新刷新頁面
if(confirm("是否確認刪除這條信息")){
$.ajax({
url:'http://10.10.1.183:8080/crm/enterprise/'+data.id,
type:'delete',
timeout:"3000",
cache:"false",
success:function(str){
if(str.data){
tables.row().remove();//刪除這行的數據
window.location.reload();//重新刷新頁面，還有一種方式：tables.draw(false);(這是不刷新，重新初始化插件，但是做刪除時候，老有問題)
}
},
error:function(err){
alert("獲取數據失敗");
}
});
}
});
$('#table_id tbody i').css({"fontStyle":"normal"});
$('#table_id tbody').on( 'click', 'button#editrow', function () {
//獲取數據
var data = tables.row( $(this).parents('tr') ).data();
//清空內容
$('.pop_clear_text input').val('');
//彈出層展示
$('.pop').show();
//填充內容
$('.pop_id').val(data.id);
$('.pop_name').val(data.name);
$('.pop_industry').val(data.industry);
$('.pop_source').val(data.source);
$('.pop_location').val(data.location);
$('.pop_serviceStatus').val(data.serviceStatus);
});
//彈出層的功能
$('.pop_cancel,.pop_close').on("click",function(){
$('.pop').hide();
});
$('.pop_confirm').on('click',function(){
var n=parseInt($('.pop_id').val());
console.log(typeof(n));
$.ajax({
url:'http://10.10.1.183:8080/crm/enterprise',
type:'PUT',
contentType: "application/json",
timeout : "3000",
cache:false,
data: JSON.stringify({
"id":n,
"name":$('.pop_name').val(),
"industry":$('.pop_industry').val(),
"location":$('.pop_location').val(),
"source":$('.pop_source').val(),
"serviceStatus":$('.pop_serviceStatus').val()
}),
dataType: "json",
success:function(str){
//彈窗關閉
$('.pop').hide();
window.location.reload();
},
error:function(err){
alert("數據刷新失敗,請重新刷新");
}
});
});
//添加事件
$('.table_list_add').on("click",function(){
//先清空
$('.table_list_name').val('');
$('.table_list_industry').val('');
$('.table_list_source').val('');
$('.table_list_location').val('');
$('.table_list_serviceStatus').val('');
//展示
$('.table_list').show();
});
//增加彈窗的功能
$('.table_list_close,.table_list_cancel').on("click",function(){
$('.table_list').hide();
});
$('.table_list_confirm').on("click",function(){
$.ajax({
url:'http://10.10.1.183:8080/crm/enterprise',
type:'POST',
contentType: "application/json",
timeout : "3000",
cache:false,
data: JSON.stringify({
"name":$('.table_list_name').val(),
"industry":$('.table_list_industry').val(),
"location":$('.table_list_location').val(),
"source":$('.table_list_source').val(),
"serviceStatus":$('.table_list_serviceStatus').val()
}),
dataType: "json",
success:function(str){
//彈窗關閉
$('.table_list').hide();
window.location.reload();
$('#table_id_last').click();
},
error:function(err){
alert("數據刷新失敗,請重新刷新");
}
});
});
//控制這個表格大小
$('#table_id_wrapper').css({"width":"1400px","margin":"20px auto"});
} );