完美实现bootstrap分页查询

完美实现bootstrap分页查询

最近，开始我们的java项目，要求尽量使用bootstrap，因为它比easyUI要好看的多。然后就开始上网查，边查边做，虽然我们引入了一些bootstrap的样式，但是并没有js代码，所有的功能都需要自己用js做。其实并不难，只要我们明白分页的实质就行。说了这么多，就让我们看看分页查询的表格是怎么做出来的吧。

先上效果图：

1、引入的css样式

我们需要引入bootstrap自带的表格样式，这样比较好看，如果再需要修改的话，我们就在其基础上再改。

2、需要的HTML文本

这里需要注意的是，每一个标签的id和class名字不要乱改，因为它对应着一些js代码和css样式。如果没有显示出效果，或者显示的效果不是自己想要的，我们可以适当进行微调。

<%-- <%@ include file="/common.jsp"%> --%>

<%@ include file="/bootstrap.jsp"%>

搜索

每页

aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length">

10

25

50

100

aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length">

10

25

50

100

条记录

style="width:50PX;margin-right:1px;" aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length">

1

style="width:50PX;margin-right:1px;" aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length">

1

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。