datatables 前端表格插件 增删改查功能

官方网站: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

时间: 2024-10-03 22:15:39

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

JavaScript之实现基本的增删改查功能

开心一笑 听说这两天,全国都很冷.福建人说1度好冷,北京人笑了:我们这零下17度.黑龙江人也笑了:我们这零下33度.呼伦贝尔人听到哈哈大笑:我们这零下43度.福建人听完冷笑一声:我说的是室内,室内,室内 提出问题 如何利用原生的js实现基本的增删改查功能 解决问题 包含两个文件(index.jsp 和 index.js) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEn

js + bootstrap 实现基本的增删改查功能 -- 兰

描述:利用原生js + bootstrap 实现基本的增删改查功能:包含两个文件(index.jsp 和 index.js) <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN

表格的增删改查

这周,复习了JS的操作,并用更简捷的代码,实现了表格的增删改查!   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"   "http://www.w3.org/TR/html4/loose.dtd">   <html>   <head>   <meta charset="utf-8">   <title><

SQLite实现基本的增删改查功能

SQLite实现基本的增删改查功能 还是向之前一样,先介绍功能,再介绍所用知识点,然后贴下代码. 一,SQLite简介: SQLite,是一款轻型的数据库,是遵守ACID(原子性.一致性.隔离性.持久性)的关联式数据库管理系统,多用于嵌入式开发中.   SQLite的数据类型:Typelessness(无类型), 可以保存任何类型的数据到你所想要保存的任何表的任何列中. 但它又支持常见的类型比如: NULL, VARCHAR, TEXT, INTEGER, BLOB, CLOB...等. 唯一的

使用MVC5+Entity Framework6的Code First模式创建数据库并实现增删改查功能

此处采用VS2017+SqlServer数据库 一.创建项目并引用dll: 1.创建一个MVC项目 2.采用Nuget安装EF6.1.3 二.创建Model 在models文件夹中,建立相应的model文件,这里建立的class名,就是数据库里表的名字.        在这里面,可以建立表之间的关系,本次将建立Course(课程).Student(学生).StuCourse(课程学生关系)来作为一个Demo [Table("t_course")]   //可以通过Attribute的形

java H2数据库使用并实现增删改查功能

原文:java H2数据库使用并实现增删改查功能 代码下载地址:http://www.zuidaima.com/share/1550463278058496.htm package com.zuidaima.h2sql.test; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.St

JavaWeb 增删改查功能

1.今天来写一个简单的增删改查功能,这个项目还是接着在昨天写的 --JavaWeb实现简单登录注册-- 来写的. 登录成功进来后对学生信息的增删改查 好了,直接贴上今天写的代码 src文件下的代码: jsp页面: 数据库创建语句: 1 CREATE TABLE nanfeng.student ( 2 stu_id INT NOT NULL AUTO_INCREMENT, 3 stu_name varchar(100) NULL, 4 stu_sex varchar(100) NULL, 5 st

3.创建Manager类,演示对TestUser进行增删改查功能

接上一篇文章 创建NHibernateHelper帮助类,生成sessionFactory http://www.cnblogs.com/fzxiaoyi/p/8443587.html 创建个新的类Manager,演示对TestUser进行增删改查功能 编写代码如下: using MySQLDateBase.Model; using System; using System.Collections.Generic; using System.Linq; using System.Text; us

基于AT UI实现表格的增删改查遇到的坑

基于AT UI实现表格的增删改查遇到的坑 坑一.表格数据加载的渲染报错 报错:Error in render: "TypeError: Cannot read property 'isChecked' of undefined" 错误原因:将数据加载进data中后,数据进入表格组件at-table中报错,为AT UI内部问题. 解决方法:数据改变后,at-table组件强制刷新.刷新方法:https://www.cnblogs.com/s313139232/p/9176820.html