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

最新推荐文章于 2024-08-30 07:23:18 发布

BAStriver

最新推荐文章于 2024-08-30 07:23:18 发布

阅读量3.3k

点赞数 3

分类专栏： # JQuery 文章标签： jQuery插件

本文链接：https://blog.csdn.net/BAStriver/article/details/68067627

版权

JQuery 专栏收录该内容

7 篇文章 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>