Jquery + dataTable + Bootstrap + 完整逻辑实现表格的增删改查

最近在做毕设,同学在做前端页面的时候使用到JQuery、DataTable和Bootstrap这些控件,然后自己又在刷题的时候遇到一个这个demo的实现,于是就自己去官网文档上学习了一下,尝试实现这个demo

官方文档:DataTable

Demo代码:Demo代码

效果如下图示:
Jquery + dataTable + Bootstrap + 完整逻辑实现表格的增删改查_第1张图片

Jquery + dataTable + Bootstrap + 完整逻辑实现表格的增删改查_第2张图片

Jquery + dataTable + Bootstrap + 完整逻辑实现表格的增删改查_第3张图片

Jquery + dataTable + Bootstrap + 完整逻辑实现表格的增删改查_第4张图片

顶部button DOM结构:

// 页面上的三个button,增删改

这里的Modal框的实现是借助Bootstrap模态框来实现的

添加图书 Modal框的实现:

修改图书内容Modal框的实现:

删除Modal框的实现:

表格的实现:

序号 书名 作者 价格 出版社 ISBN

使用到一些简单的自定义样式:

其中,dataTable有三种数据获取方式,数组,JSON和Ajax请求数据
例如数组数据:

var data = [['', '三体', '刘慈欣', '39.00', '重庆出版社', '982513213516']]

其实官网很多小例子,大家可以参考学习
dataTables中文网

以上都是页面的DOM结构的实现,接下来,我们讲讲JS代码实现逻辑

知乎

个人博客

Github

你可能感兴趣的:(datatable,bootstrap,jquery,javascript)