最近在做毕设,同学在做前端页面的时候使用到JQuery、DataTable和Bootstrap这些控件,然后自己又在刷题的时候遇到一个这个demo的实现,于是就自己去官网文档上学习了一下,尝试实现这个demo
官方文档:DataTable
Demo代码:Demo代码
顶部button DOM结构:
1 | // 页面上的三个button,增删改 |
这里的Modal框的实现是借助Bootstrap模态框来实现的
添加图书 Modal框的实现:
1 | <div class="modal fade" id="addBook" role="dialog"> |
修改图书内容Modal框的实现:
1 | <div class="modal fade" id="editBookInfo" role="dialog"> |
删除Modal框的实现:
1 | <div class="modal fade" id="deleteBook" role="dialog"> |
表格的实现:
1 | <table id="books" class="table table-striped table-bordered row-border hover order-column" cellspacing="0" width="100%"> |
使用到一些简单的自定义样式:
1 | <style> |
其中,dataTable有三种数据获取方式,数组,JSON和Ajax请求数据
例如数组数据:
1 | var data = [['', '三体', '刘慈欣', '39.00', '重庆出版社', '982513213516']] |
其实官网很多小例子,大家可以参考学习
dataTables中文网
以上都是页面的DOM结构的实现,接下来,我们讲讲JS代码实现逻辑
1 | <script> |
v1.5.2