7、分页显示数据页程序.doc

分页显示数据、批量删除目录 1． 1 （1) 1 （2) 1 2． 2 3． 2 （1) 3 （2) 3 （3) 3 4． 4 5． 6 （1) 6 （2) 6 （3) 6 （4) 7 预备知识 bootstrap table插件 bootstrap table是简洁扁平的表格bootstrap的资源文件，即js和css。 bootstrap table使用方法 1）在html页面的head标签中引入Bootstrap库（假如你的项目还没使用）和bootstrap-table.css。 link?rel=stylesheet?href=bootstrap.min.css ????????link?rel=stylesheet?href=bootstrap-table.css 2）在head标签或者在body标签闭合前（比较推荐）引入jQuery库和Bootstrap库（假如你的项目还没使用）和bootstrap-table.js。 script?src=jquery.min.js/script ????????script?src=bootstrap.min.js/script ????????script?src=bootstrap-table.js/script 若需要支持中文需要加入 script src=bootstrap-table-zh-CN.min.js type=text/javascript/script 3）指定数据源，这里有两种方式 ?A）通过data属性标签 ?在一个普通的表格中设置data-toggle=table可以在不写JavaScript的情况下启用Bootstrap Table。 table?data-toggle=table?data-url=data.json ????????????thead ????????????????...???? ????????????/thead ????????/table B）通过JavaScript设置数据源 通过JavaScript来启用带有id属性的Table。 table id=table /table $(#table).bootstrapTable({ ??????????url:?data.json? ????????}); 建立显示详细信息的三个相关文件 新建list1.html、list1.js、list1.Ashx三个文件 编写list1.html !DOCTYPE html html head meta http-equiv=Content-Type content=text/html; charset=utf-8/ title/title meta charset=utf-8 / link rel=stylesheet href=../Content/bootstrap.min.css link rel=stylesheet href=../Content/bootstrap-table.css script src=../Scripts/jquery-1.10.2.min.js type=text/javascript/script script src=../Scripts/bootstrap.min.js/script script src=../Scripts/bootstrap-table.js/script script src=../Scripts/bootstrap-table-zh-CN.min.js type=text/javascript/script script src=js/list1.js type=text/javascript/script /head body iframe src=nav.html height=50 width=100% frameborder=0 scrolling=no /iframe p用bootstrap table显示数据列表/p table id=table thead tr th data-field=state data-checkbox=true/th th data-field=adminID data-sortable=true data-align=center编号/th th data-field=LoginID data-align=center登录名/