jquery+dataTable实现增删改查demo

最新推荐文章于 2020-12-19 14:49:45 发布

我爱的小明

最新推荐文章于 2020-12-19 14:49:45 发布

阅读量1.3k

点赞数 2

分类专栏：小作品文章标签： jquery

本文链接：https://blog.csdn.net/weixin_44478408/article/details/93234656

版权

小作品专栏收录该内容

4 篇文章 0 订阅

订阅专栏

data.json

{
  "body":[
    {
      "id":1,
      "name":"三体",
      "author":"刘慈欣",
      "price":"23.00",
      "publish":"重庆出版社",
      "isbn":"9787536692930"
    },
    {
      "id":2,
      "name":"三体",
      "author":"刘慈欣",
      "price":"23.00",
      "publish":"重庆出版社",
      "isbn":"9787536692930"
    },
    {
      "id":3,
      "name":"三体",
      "author":"刘慈欣",
      "price":"23.00",
      "publish":"重庆出版社",
      "isbn":"9787536692930"
    },
    {
      "id":4,
      "name":"三体",
      "author":"刘慈欣",
      "price":"23.00",
      "publish":"重庆出版社",
      "isbn":"9787536692930"
    },
    {
      "id":5,
      "name":"三体",
      "author":"刘慈欣",
      "price":"23.00",
      "publish":"重庆出版社",
      "isbn":"9787536692930"
    },
    {
      "id":6,
      "name":"三体",
      "author":"刘慈欣",
      "price":"23.00",
      "publish":"重庆出版社",
      "isbn":"9787536692930"
    },
    {
      "id":7,
      "name":"三体",
      "author":"刘慈欣",
      "price":"23.00",
      "publish":"重庆出版社",
      "isbn":"9787536692930"
    },
    {
      "id":8,
      "name":"三体",
      "author":"刘慈欣",
      "price":"23.00",
      "publish":"重庆出版社",
      "isbn":"9787536692930"
    },
    {
      "id":9,
      "name":"三体",
      "author":"刘慈欣",
      "price":"23.00",
      "publish":"重庆出版社",
      "isbn":"9787536692930"
    },
    {
      "id":10,
      "name":"三体",
      "author":"刘慈欣",
      "price":"23.00",
      "publish":"重庆出版社",
      "isbn":"9787536692930"
    },
    {
      "id":11,
      "name":"三体",
      "author":"刘慈欣",
      "price":"23.00",
      "publish":"重庆出版社",
      "isbn":"9787536692930"
    },
    {
      "id":12,
      "name":"三体",
      "author":"刘慈欣",
      "price":"23.00",
      "publish":"重庆出版社",
      "isbn":"9787536692930"
    }
  ]
}

index.html

<!doctype html>
<html>
<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <!-- css -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://cdn.bootcss.com/datatables/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet">
    <!-- js -->
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcss.com/datatables/1.10.13/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.bootcss.com/bootbox.js/4.3.0/bootbox.min.js"></script>
    <script src="index.js"></script>
    <style>
        .book{
            position: relative;
            width: 100%;
            height: 100%;
        }
        .mask{
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0.5;
            display: none;
            position: absolute;
            left: 0;
            top:0;
            z-index: 5;
        }
        .container{
            width: 1200px;
            height: 1000px;
            margin: 0 auto;
        }
        .b-operation{
            margin: 10px;
            text-align: right;
        }
        .list-group .l-head{
            text-align: left;
            font-size: 20px;
            font-weight: 700;
        }
        .list-group{
            width: 650px;
            height: 600px;
        }
        .list-group-item{
            text-align: center;
        }
        .list-group-item div{
            position: relative;
            width: 100%;
            height: 50px;
        }
        .list-group-item input{
            position: absolute;
            right: 50px;
            display: inline-block;
            width: 400px;
        }
        .list-group-item span{
            position: absolute;
            left: 100px;
        }
        .btn{
            margin: 5px 2px;
        }
        .btn-d{
            text-align: right;
        }
        .b-add,.b-reset{
            position: absolute;
            left: 50%;
            top:50%;
            margin-left: -325px;
            margin-top: -300px;
            z-index: 10;
            display: none;
        }
        .b-del{
            position: absolute;
            left: 50%;
            top:50%;
            margin-left: -325px;
            margin-top: -300px;
            z-index: 10;
            display: none;
        }
    </style>
</head>
<body>

<div class="book">
    <div class="mask"></div>
    <div class="container">
        <div class="b-operation">
            <input type="button" class="btn btn-primary" value="新增" id="b-add">
            <input type="button" class="btn btn-warning" value="修改" id="b-reset">
            <input type="button" class="btn btn-info" value="删除" id="b-del">
        </div>

        <div class="b-list">
            <table class="display" id="datatable_xs">
                <thead>
                <tr>
                    <th>序号</th>
                    <th>书名</th>
                    <th>作者</th>
                    <th>价格</th>
                    <th>出版社</th>
                    <th>ISBN</th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="b-add" >
            <ul class="list-group">
                <li class="list-group-item l-head">图书</li>
                <li class="list-group-item l-add">
                    <div><span>书名:*</span><input type="text" title="姓名" class="form-control a-name"></div>
                    <div><span>作者:*</span><input type="text" title="作者" class="form-control a-author"></div>
                    <div><span>价格:*</span><input type="text" title="价格" class="form-control a-price"></div>
                    <div><span>出版社:*</span><input type="text" title="出版社" class="form-control a-publish"></div>
                    <div><span>ISBN:*</span><input type="text" title="ISBN" class="form-control a-isbn"></div>
                </li>
                <li class="list-group-item">
                    <button type="button" class="btn btn-default" id="cancel-add">取消</button>
                    <button type="button" class="btn btn-primary" id="save-add">保存</button>
                </li>
            </ul>
        </div>
        <div class="b-reset" >
            <ul class="list-group">
                <li class="list-group-item l-head">图书</li>
                <li class="list-group-item l-reset">
                    <div><span>书名:*</span><input type="text" title="姓名" class="form-control b-name"></div>
                    <div><span>作者:*</span><input type="text" title="作者" class="form-control b-author"></div>
                    <div><span>价格:*</span><input type="text" title="价格" class="form-control b-price"></div>
                    <div><span>出版社:*</span><input type="text" title="出版社" class="form-control b-publish"></div>
                    <div><span>ISBN:*</span><input type="text" title="ISBN" class="form-control b-isbn"></div>
                </li>
                <li class="list-group-item">
                    <button type="button" class="btn btn-default" id="cancel-reset">取消</button>
                    <button type="button" class="btn btn-primary" id="save-reset">保存</button>
                </li>
            </ul>
        </div>
        <div class="b-del" >
            <ul class="list-group">
                <li class="list-group-item">确定要删除吗</li>
                <li class="list-group-item btn-d">
                    <button type="button" class="btn btn-danger" id="cancel-del">否</button>
                    <button type="button" class="btn btn-success" id="save-del">是</button>
                </li>
            </ul>
        </div>
    </div>
</div>
</body>
</html>

index.js

$( document ).ready(function() {

    var table =$("#datatable_xs").DataTable( {
        language:{
            "url":"language.json"
        },
        ajax: {
            url: '/data.json',
            dataSrc: 'body'
        },
        columns: [
            {"data": "id"},
            {"data": "name"},
            {"data": "author"},
            {"data": "price"},
            {"data": "publish"},
            {"data": "isbn"}
        ],
        "pagingType":   "simple_numbers"
    } );


    $("#datatable_xs tbody").on("click", "tr", function () {

        if ( $(this).hasClass("selected") ) {
            $(this).removeClass("selected");
        }
        else {
            table.$('tr.selected').removeClass('selected');
            $(this).addClass('selected');
            // $("tbody tr").each(function () {
            //     $("tr").removeClass("selected")
            // });
            // $(this).addClass("selected");
        }


    });

    //验证
    function chkInput(str,price) {
        var strArry = str.split(',');
        var Flag = true;
        for (var i = 0; i < strArry.length; i++) {
            if ($(strArry[i]).val() === "" || $(strArry[i]).val() === null) {
                $(strArry[i]).focus();
                Flag = false;
                alert("请填写 : "+$(strArry[i]).attr("title"));
                break;
            }
        }
        if(isNaN(price)||price === null){
            alert("价钱请填写数字");
            Flag = false;
        }
        return Flag;
    }

    // 修改功能
    var lReset=$(".l-reset")
    $("#b-reset").click(function () {
        if (table.rows('.selected').data().length) {
            $(".b-reset").css("display","block");
            $(".mask").css("display","block");
            var rowData = [table.row('.selected').data().name,table.row('.selected').data().author,table.row('.selected').data().price,table.row('.selected').data().publish,table.row('.selected').data().isbn];
            var inputs =lReset .find('input');console.log(inputs);
            for (var i = 0; i < inputs.length; i++) {
                $(inputs[i]).val(rowData[i])
            }
        } else {
            alert('请选择项目');
        }
    });
    $("#save-reset").click(function () {
            var resetName = $(".b-name").val();
            var resetAuthor = $(".b-author").val();
            var resetPrice = $(".b-price").val();
            var resetPublish = $(".b-publish").val();
            var resetISBN = $(".b-isbn").val();
            var rPrice=$(".b-price").val();
            var strReset = ".b-name" + "," +".b-author"+ "," + ".b-price" + "," + ".b-publish" + "," +".b-isbn";
            if (chkInput(strReset,rPrice)){
                var newRowData = [].concat(resetName, resetAuthor, resetPrice, resetPublish, resetISBN);
                var tds = Array.prototype.slice.call($('.selected td'));
                for (var i = 0; i < newRowData.length; i++) {
                    tds[i + 1].innerHTML = newRowData[i];
                }
                $(".b-reset").css("display","none");
                $(".mask").css("display","none");
                $(".l-reset").find('input').val('')
            }
    });
    $("#cancel-reset").click(function () {
        $(".l-reset").find('input').val('');
        $(".b-reset").css("display","none");
        $(".mask").css("display","none")
    });

    // 添加功能
    var lAdd=$(".l-add");
    $("#b-add").click(function () {
        $(".b-add").css("display","block");
        $(".mask").css("display","block")

    });
    $("#save-add").click(function () {
        if (lAdd.find('input').val().length) {
            if (lAdd.find('input').val() !== '') {
                var bookName = $(".a-name").val();
                var bookAuthor = $(".a-author").val();
                var bookPrice = $(".a-price").val();
                var bookPublish = $(".a-publish").val();
                var bookISBN = $(".a-isbn").val();
                var lastId=table.data().length>1?table.data()[table.data().length-1].id:1;
                var newData={
                    id:lastId+1,
                    name:bookName,
                    author:bookAuthor,
                    price:bookPrice,
                    publish:bookPublish,
                    isbn:bookISBN
                };
                var strAdd = ".a-name" + "," +".a-author"+ "," + ".a-price" + "," + ".a-publish" + "," +".a-isbn";
                var aPrice=$(".a-price").val();
                if (chkInput(strAdd,aPrice)){
                    table.row.add(newData).draw();
                    $(".b-add").css("display","none");
                    $(".mask").css("display","none");
                    lAdd.find('input').val('')
                }
            }
        } else {
            alert('请填写 : 书名');
            $(".a-name").focus();
        }
    });
    $("#cancel-add").click(function () {
        lAdd.find('input').val('');
        $(".b-add").css("display","none");
        $(".mask").css("display","none")
    });




    // 删除功能
    $("#b-del").click(function () {
        if (table.rows('.selected').data().length) {
            $(".b-del").css("display","block");
            $(".mask").css("display","block")
        } else {
            alert('请选择项目');
        }
    });
    $("#save-del").click(function () {
        table.row('.selected').remove().draw(false);
        $(".b-del").css("display","none");
        $(".mask").css("display","none")
    });
    $("#cancel-del").click(function () {
        $(".b-del").css("display","none");
        $(".mask").css("display","none")
    });

});

language.json

{
  "sProcessing": "处理中...",
  "sLengthMenu": "每页 _MENU_ 条记录",
  "sZeroRecords": "没有匹配结果",
  "sInfo": "第 _PAGE_ 页(总共 _PAGES_ 页)",
  "sInfoEmpty": "",
  "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
  "sInfoPostFix": "",
  "sSearch": "搜索:",
  "sUrl": "",
  "sEmptyTable": "表中数据为空",
  "sLoadingRecords": "载入中...",
  "sInfoThousands": ",",
  "oPaginate": {
    "sFirst": "首页",
    "sPrevious": "上页",
    "sNext": "下页",
    "sLast": "末页"
  },
  "oAria": {
    "sSortAscending": ": 以升序排列此列",
    "sSortDescending": ": 以降序排列此列"
  }
}