简易版dataTable，包含增删改查、统计

深藏阁楼爱情的钟 2022-06-18 04:13 113阅读 0赞

<!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>

![Center][]

[下载附件][Link 1]

修改：请大家把dataTable.js的318、319的两行代码剪切到362行，也就是init里面。有什么疑问欢迎各位留言~

[Center]: /images/20220618/154fc4c5d09d4bf28bb6d80c8299c1c3.png
[Link 1]: http://download.csdn.net/download/bastriver/9803407