官方网站: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"});
} );
转自:http://www.cnblogs.com/shiyou00/p/5606865.html

datatables 前端表格插件 增删改查功能的更多相关文章

  1. jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!)

    jQuery EasyUI/TopJUI实现数据表格的增删改查功能(不写js,纯HTML实现!!!) 废话不多说,直接贴上代码 <table id="configEdatagrid&q ...

  2. JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能

    JQuery Easyui/TopJUI 用JS创建数据表格并实现增删改查功能 html <table id="productDg"></table> &l ...

  3. 【BootStrap】--具有增删改查功能的表格Demo

    [BootStrap]--具有增删改查功能的表格Demo 目录(?)[+] 前言 版本一 样式 代码 版本二 样式 代码 版本三 样式 代码 总结 前言 bootstrap的表格样式,有类似EasyU ...

  4. 用AngularJS实现对表格的增删改查(仅限前端)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  5. BootstrapTable与KnockoutJS相结合实现增删改查功能

    http://www.jb51.net/article/83910.htm KnockoutJS是一个JavaScript实现的MVVM框架.通过本文给大家介绍BootstrapTable与Knock ...

  6. 快速开发平台WebBuilder中ExtJS表格的增删改查

    使用WebBuilder可实现表格的自动增删改查功能,而无需编写前台脚本和后台SQL. WebBuilder开源项目地址:http://www.putdb.com 自动生成的页面: <!DOCT ...

  7. 【原生】js实现表格的增删改查

    说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...

  8. SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学、字符串、日期时间)函数[转]

    SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学.字符串.日期时间)函数   --创建表格 create table aa ( UserName varchar(50 ...

  9. Online Coding开发模式 (通过在线配置实现一个表模型的增删改查功能,无需写任何代码)

    JEECG 智能开发平台. 开发模式由代码生成器转变为Online Coding模式                      (通过在线配置实现一个表模型的增删改查功能,无需一行代码,支持用户自定义 ...

随机推荐

  1. Linux 笔记总览

    LInux 性能分析 Linux IO实时监控命令详解

  2. 函数指针与指针函数以及typedef

    c难于理解的是指针,其魅力之处也是指针,函数方法结构,化繁为简可以理解为:返回值 函数名(形参表),具体来说: 返回值:1.可以为空void 2.基本数据类型char short int long f ...

  3. Centos7 搭建 Keepalived+LVS 备注

    NAT模型需要RealServer gateway设定为,DR模式需要执行 RealServer.sh.需要先安装network-tools. #!/bin/bash#description : st ...

  4. python——挖装饰器祖坟事件

    装饰器是什么呢? 我们先来打一个比方,我写了一个python的插件,提供给用户使用,但是在使用的过程中我添加了一些功能,可是又不希望用户改变调用的方式,那么该怎么办呢? 这个时候就用到了装饰器.装饰器 ...

  5. Unity NGUI 2D场景添加按钮

    比如说先添加一个sprite 在sprite加上NGUI的 UI Button 然后重点来了  加上Box Collider 2D(重点:2D 千万不要加 Box Collider) 将Box Col ...

  6. hive踩过的小坑

    上周使用hive做一些操作,几个小问题纠结很久.特此记录下: hive概念   hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供简单的sql查询功能,可以 ...

  7. 对比Linux系统和Windows系统哪个更好

    最近半年来,我一直在读一本叫做<Linux就该这么学>的Linux教材,确实让我进步的很快,也慢慢的让Linux系统走入了我的知识认知中,那么学习前我们来对比下Windows和Linux的 ...

  8. this kernel requires an x86-64 CPU, but only detected an i686 CPU. unable to boot - please ues a ker

    http://blog.csdn.net/xiao_cs/article/details/7728529 this kernel requires an x86-64 CPU, but only de ...

  9. CSS动画 防止动画结束后,回归原位

    animation-fill-mode防止动画结束后,回归原位 animation: arrowsfirst 1s; animation-timing-function: linear; animat ...

  10. java面试准备之基础排序——冒泡与选择排序

    选择排序:     [java]    public void select(int[] arr){            for(int i=0;i<arr.length;i++){      ...