当前位置：首页 > 网页特效 > 表格

基于Bootstrap的jquery动态数据表格插件

分类：表格日期：2024-05-14 点击(3) 评论(0)

简介

在页面中引入bootstrap相关文件，jquery和raydreams.js文件。

```html
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/raydreams.js"></script>  
```                   
#####  HTML结构
使用一个div来作为容器，在它里面会生成bootstrap表格。

```html
<div id="dataTable" class="table table-striped table-bordered">
  
</div>
```
##### 初始化插件 初始化插件
首先你需要准备好表格的数据，通常数据是一个数组，里面的每一个对象是一行表格数据，类似下面的样子。

```html
var myData =[  
   {  
      "id":"1",
      "firstName":"Darnall",
      "lastName":"Eakeley",
      "title":"Research Assistant I",
      "grade":8,
      "ssn":"313-24-2493",
      "birthDate":"1995-03-22T20:42:15Z"
   },
   {  
      "id":"2",
      "firstName":"Nollie",
      "lastName":"Poli",
      "title":"Electrical Engineer",
      "grade":3,
      "ssn":"539-37-8776",
      "birthDate":"1988-09-28T20:24:37Z"
   },
   ...
]                  
```
然后在页面DOM元素加载完毕之后，通过下面的方法来生成表格并填充数据。

```html
jQuery("#dataTable").raytable({
  data: myData
  columns: [
    { title: "Info", icons: [{ glyph: "glyphicon-info-sign", handler: iconAction, data:"id" }], renderIf: isManager },
    { field: "firstName", title: "First Name", sort:true },
    { field: "lastName", title: "Last Name", sort: true },
    { field: "title", title: "Title" },
    { field: "grade", title: "Grade", sort: true },
    { field: "ssn", title: "SSN"  },
    { field: "birthDate", title: "DOB", sort: true, format: parseDate },
    { title: "Delete", icons: [{ glyph: "glyphicon-trash", handler: iconAction, data: "id" }] }
  ]
});
```

web299.com

基于Bootstrap的jquery动态数据表格插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果