完美实现bootstrap分页查询

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

1、引入的css样式

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

rush:css;">

2、需要的HTML文本

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

rush:xhtml;"> <Meta charset="UTF-8"> 学生违纪信息 <%-- <%@ include file="/common.jsp"%> --%> <%@ include file="/bootstrap.jsp"%>

<div class="row" style="padding-bottom: 20px;margin-top:20px;">

<div class="col-md-9">
<div class="input-group">
<input id="searchString" type="text" style="height:28px;" class="form-control" placeholder="请输入实体名">
<span class="input-group-btn">
   <button type="button" class="btn btn-info" onclick="search()" onkeypress="Enter()">
<span class="glyphicon glyphicon-search" aria-hidden="true"/>
搜索

<div class="row">
<div class="col-md-12" style="margin-top:20px;">
<div class="panel panel-info">
<div class="panel-heading">学生违纪信息


<table id="table" class="table table-striped table-bordered table-hover datatable">
<thead id="tem">
<th id="studentId">学号
<th id="studentName">姓名
<th id="courseId">考试科目
<th id="examRoomId">考场号
<th id="className">班级
<th id="teacherId">监考人员

每页 条记录
显示第 1 至 10 项记录,共 57 项
IoUsNext">
  • IoUs()" class="prev disabled">
  • 3、相应的js代码

    这里包含了模糊查询事件,回车事件,上一步,下一步,选择页,选择每页显示条数等常用功能,后期再补充排序和选择列的显示和隐藏等。

    rush:js;">

    经过这些天的努力,实现了最基本的分页查询功能,还包括上一页下一页以及选择跳页效果,而且可以进行模糊查询,而且如果记录小于5条就不会产生分页等。后期再加上排序,选择列的显示和影藏就更好了。我们需要做的还很多,只要我们努力,就一定能够做到。

    如果大家还想深入学习,可以点击进行学习,再为大家附两个精彩的专题:

    以上就是本文的全部内容,希望对大家的学习有所帮助。

    bootstrapbootstrap分页查询

    相关文章

    Bootstrip HTML 查询搜索常用格式模版 &lt;form class=&...
    如何在按钮上加红色数字 您可以使用Bootstrap的badge组件来在...
    要让两个按钮左右排列,你可以使用 Bootstrap 的网格系统将它...
    是的,可以将status设置为布尔类型,这样可以在前端使用复选...
    前端工程师一般用的是Bootstrap的框架而不是样式,样式一般自...
    起步导入:<linkrel="stylesheet"href="b...