dataTable插件简单使用

最新推荐文章于 2024-08-08 08:27:18 发布

金牛不懂不懂

最新推荐文章于 2024-08-08 08:27:18 发布

阅读量3k

点赞数

分类专栏： Javascript 文章标签： datatable

本文链接：https://blog.csdn.net/u010810559/article/details/51436248

版权

这篇博客介绍了如何使用dataTable插件来创建和管理HTML表格。首先导入js文件dataTables.min.js，然后在HTML中定义表格结构。接着在JS中定义oTable变量，配置插件的参数，包括数据源、列映射、分页样式等。同时，展示了如何添加编辑和删除功能，通过编辑和删除的JS代码来实现交互操作。

摘要由CSDN通过智能技术生成

首先，要导入一个js文件dataTables.min.js

<script src='js/ui/jquery.dataTables.min.js'></script>

然后在html里面添加你需要的table，代码如下

<table id="tableMain" class="table table-striped table-bordered bootstrap-datatable" style="font-size: 13px;">
        <thead>
         <tr>
           <th style="display: none;">ID</th>
          <th style="width: 15%">灾情大类名称</th>
          <th style="width: 15%">灾情小类名称</th>
          <th style="width: 30%">灾情描述内容</th>
          <th style="width: 20%">修改</th>
          <th style="width: 20%">删除</th>
         </tr>
        </thead>
        <tbody>

        </tbody>
       </table>

然后在你的js中定义oTable变量，代码如下：

    var oTable = $("#tableMain").dataTable({                       //此处的tableMain为table的id值
    "sAjaxSource": "message/MessAnalysis_getZqdmList",//此处为跳转后台的url，此处用的是Strusts2框架
    "aoColumns": [                                                                //返回的参数字段，和表字段对应
        { "mDataProp": "id" },
        { "mDataProp": "zqdlmc" },
        { "mDataProp": "zqxlmc" },
        { "mDataProp": "zqmsnr" },
        { "mDataProp": "id" },
        { "mDataProp": "id" }
    ],
    "aoColumnDefs": [                                                          //对指定列做操作，此处效果为为第一列设置不能搜索，不能显示
     { "bSearchable": false, "bVisi