<small id="4zhy6"></small>

溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×

忘記密碼？

登錄注冊×

獲取短信驗證碼

其他方式登錄

點擊登錄注冊即表示同意《億速云用戶服務(wù)條款》

用戶登錄×

賬戶密碼登錄

請使用微信掃描上方二維碼

使用幫助

請求超時！

請點擊重新獲取二維碼

Bootstrap_table與Java整合使用

發(fā)布時間：2020-06-21 06:40:48 來源：網(wǎng)絡(luò) 閱讀：2887 作者：萬和IT教育欄目：web開發(fā)

1. 什么是Bootstrap-table？

在業(yè)務(wù)系統(tǒng)開發(fā)中，對表格記錄的查詢、分頁、排序等處理是非常常見的，在Web開發(fā)中，可以采用很多功能

強大的插件來滿足要求，且能極大的提高開發(fā)效率。
Bootstrap-table是一款非常有名的開源表格插件，在很多項目中廣泛的應(yīng)用。
Bootstrap-table插件提供了非常豐富的屬性設(shè)置，可以實現(xiàn)查詢、分頁、排序、復選框、設(shè)置顯示列、Card

view視圖、主從表顯示、合并列、國際化處理等處理功能，而且該插件同時也提供了一些不錯的擴展功能，如

移動行、移動列位置等一些特殊的功能，
插件可以用基于HTML5的data-*屬性標識設(shè)置，也可以使用Javascript方式進行設(shè)置，非常方便

Bootstrap_table與Java整合使用

2. Bootstrap-table兩種模式

Bootstrap-Table顯示數(shù)據(jù)到表格的方式有兩種，一種是客戶端（client）模式，一種是服務(wù)器（server）模式。
- 客戶端模式：指的是在服務(wù)器中把要顯示到表格的數(shù)據(jù)一次性加載出來，然后轉(zhuǎn)換成JSON格式傳到要顯
示的界面中，客戶端模式較為簡單，它是把數(shù)據(jù)一次性加載出來放到界面上，然后根據(jù)你設(shè)置的每頁記錄

數(shù)，自動生成分頁。當點擊第二頁時，會自動加載出數(shù)據(jù)，不會再向服務(wù)器發(fā)送請求。同時用戶可以使用

其自帶的搜索功能，可以實現(xiàn)全數(shù)據(jù)搜索。對于數(shù)據(jù)量較少的時候，可以使用這個方法。
- 服務(wù)器模式：指的是根據(jù)設(shè)定的每頁記錄數(shù)和當前要顯示的頁碼，發(fā)送數(shù)據(jù)到服務(wù)器進行查詢，然后再顯
示到表格中。該方法可以根據(jù)用戶的需要動態(tài)的加載數(shù)據(jù)，節(jié)省了服務(wù)器的資源，但是不能使用其自帶的

全數(shù)據(jù)搜索功能。
Bootstrap-table是基于Boostrap開發(fā)的插件，因此使用的時候，需要引入Bootstrap的腳本和樣式。

3. 加載css和js

完整的css和js不太好找全噢 ,歡迎加入學習群560819979，找獲取。敲門磚:浪淘沙

<!-- 核心 css -->
<link rel="stylesheet" href="plugin/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="plugin/bootstrap-table/src/bootstrap-table.css">
<link rel="stylesheet" href="plugin/bootstrap-editable/bootstrap-editable.css">

<!-- 核心 js -->
<script src="plugin/jquery.min.js"></script>
<script src="plugin/bootstrap/js/bootstrap.min.js"></script>
<script src="plugin/bootstrap-table/src/bootstrap-table.js"></script>
<script src="plugin/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>
<script src="plugin/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js"></script>

4. client模式

Bootstrap_Table是一個插件，要依賴于Bootstrap，而BootStrap要依賴于jQuery
Bootstrap_Table可以實現(xiàn)查詢、分頁、排序、復選框、設(shè)置顯示列、Card view視圖、主從表顯示、合并列、國際化處理等處理功能
插件操作有兩種方式
- 基于data-*屬性
- 基本用Javascript方式【推薦】
顯示數(shù)據(jù)到表格的方式有兩種，
- 客戶端（client）模式，第三階段使用
- 服務(wù)器（server）模式，后面的階段使用

需要引入的 css和js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
 <!-- 核心 css -->
  <link rel="stylesheet" href="third/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="third/bootstrap-table/src/bootstrap-table.css">
  <link rel="stylesheet" href="third/bootstrap-editable/bootstrap-editable.css">

</head>
<body>

<!-- 核心 js -->
<script src="third/jquery/jquery-3.3.1.min.js"></script>
<script src="third/bootstrap/js/bootstrap.min.js"></script>
<script src="third/bootstrap-table/src/bootstrap-table.js"></script>
<script src="third/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>
<script src="third/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js"></script>
<script src="third/bootstrap-export/tableExport.js"></script>
</body>
</html>

data實戰(zhàn)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 核心 css -->
  <link rel="stylesheet" href="third/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="third/bootstrap-table/src/bootstrap-table.css">
  <link rel="stylesheet" href="third/bootstrap-editable/bootstrap-editable.css">

</head>
<body>
<div class="container">
  <div id="toolbar">
      <button id="remove" class="btn btn-danger" >
          <i class="glyphicon glyphicon-remove"></i> Delete
      </button>
      <button id="add" class="btn btn-primary" >
          <i class="glyphicon glyphicon-ok"></i> Insert
      </button>
  </div>

  <table id="student"
         data-toolbar="#toolbar"
         data-search="true"
         data-show-refresh="true"
         data-show-toggle="true"
         data-show-columns="true"
         data-show-export="true"
         data-detail-view="true"
         data-detail-formatter="detailFormatter"
         data-minimum-count-columns="2"
         data-show-pagination-switch="true"
         data-pagination="true"
         data-id-field="id"
         data-page-size="5"
         data-page-list="[5, 10, 25, 50, 100, ALL]"
         data-show-footer="false"
         data-side-pagination="client"
         data-url="data/student_data.json">

      <thead>
      <tr>
          <th data-field="state" data-checkbox="true"></th>
          <th data-field="id" data-sortable="true">ID</th>
          <th data-field="name" data-sortable="true">名稱</th>
          <th data-field="age" data-sortable="true">年齡</th>
          <th data-field="gender">性別</th>
          <th data-field="address">地址</th>
      </tr>
      </thead>
  </table>
</div>

<!-- 核心 js -->
<script src="third/jquery/jquery-3.3.1.min.js"></script>
<script src="third/bootstrap/js/bootstrap.min.js"></script>
<script src="third/bootstrap-table/src/bootstrap-table.js"></script>
<script src="third/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>
<script src="third/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js"></script>
<script type="text/javascript" language="JavaScript">
  //初始化表格，不要缺少
  $('#student').bootstrapTable();
</script>
</body>
</html>

js實踐

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 核心 css -->
  <link rel="stylesheet" href="third/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="third/bootstrap-table/src/bootstrap-table.css">
  <link rel="stylesheet" href="third/bootstrap-editable/bootstrap-editable.css">

</head>
<body>
<div class="container">
  <div id="toolbar">
      <button id="remove" class="btn btn-danger" >
          <i class="glyphicon glyphicon-remove"></i> Delete
      </button>
      <button id="add" class="btn btn-primary" >
          <i class="glyphicon glyphicon-ok"></i> Insert
      </button>
  </div>

  <table id="student"></table>
</div>

<!-- 核心 js -->
<script src="third/jquery/jquery-3.3.1.min.js"></script>
<script src="third/bootstrap/js/bootstrap.min.js"></script>
<script src="third/bootstrap-table/src/bootstrap-table.js"></script>
<script src="third/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>
<script src="third/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js"></script>
<script src="third/bootstrap-export/tableExport.js"></script>
<script type="text/javascript" language="JavaScript">

  //操作事件放置在最前面
  window.operateEvents = {
      'click .find': function (e, value, row, index) {
          alert('You click find action, row: ' + JSON.stringify(row));
      },
      'click .update': function (e, value, row, index) {
          alert('You click update action, row: ' + JSON.stringify(row));
      },
      'click .remove': function (e, value, row, index) {
          $("#student").bootstrapTable('remove', {
              field: 'id',
              values: [row.id]
          });
      }
  };

  //初始化表格，不要缺少
  $("#student").bootstrapTable({
      url: "data/student_data.json",      //請求后臺的URL（*）
      method: 'GET',                      //請求方式（*）
      toolbar: '#toolbar',              //工具按鈕用哪個容器
      striped: true,                      //是否顯示行間隔色
      cache: false,                       //是否使用緩存，默認為true，所以一般情況下需要設(shè)置一下這個屬性（*）
      pagination: true,                   //是否顯示分頁（*）
      showPaginationSwitch: true,         //顯示切換分頁
      showFooter: false,                    //顯示底部，默認不顯示
      showFullscreen: false,               //顯示全屏
      showHeader: true,                    //顯示頭部，默認顯示
      showExport: true,                    //顯示導出
      showColumns: true,                  //是否顯示所有的列（選擇顯示的列）
      showRefresh: true,                  //是否顯示刷新按鈕
      sortable: true,                     //是否啟用排序
      sortOrder: "asc",                   //排序方式
      sidePagination: "client",           //分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
      pageNumber: 1,                      //初始化加載第一頁，默認第一頁,并記錄
      pageSize: 5,                     //每頁的記錄行數(shù)（*）
      pageList: [5, 10, 15, 20],        //可供選擇的每頁的行數(shù)（*）
      search: true,                      //是否顯示表格搜索
      strictSearch: true,
      minimumCountColumns: 2,             //最少允許的列數(shù)
      clickToSelect: true,                //是否啟用點擊選中行
      uniqueId: "id",                     //每一行的唯一標識，一般為主鍵列
      showToggle: true,                   //是否顯示詳細視圖和列表視圖的切換按鈕
      cardView: false,                    //是否顯示詳細視圖
      detailView: false,                  //是否顯示父子表
      columns: [
          [
              {
                  field: 'state',
                  checkbox: true,
                  align: 'center',
                  valign: 'middle'
              },
              {
                  title: '學號',
                  field: 'id',
                  align: 'center',
                  valign: 'middle',
                  sortable: true
              },
              {
              title: '姓名 ',
              field: 'name',

              sortable: true,
              editable: false,
              align: 'center'
          }, {
              title: '年齡',
              field: 'age',

              sortable: true,
              editable: false,
              align: 'center'
          }, {
              title: '性別',
              field: 'gender',
              sortable: true,
              align: 'center'
          }, {
              title: '操作',
              field: 'operate',
              align: 'center',
             events: operateEvents,
              formatter: operateFormatter
          }
          ]
      ]
  });

  function operateFormatter(value,row,index) {
      return [
          '<a class="btn btn-primary btn-sm find" href="javascript:void(0)" title="Select">Select',
          '</a>  ',
          '<a class="btn btn-success btn-sm update" href="javascript:void(0)" title="Update">Update',
          '</a> ',
          '<a class="btn btn-danger btn-sm remove" href="javascript:void(0)" title="Remove">Remove',
          '</a>'
      ].join('');
  }

  window.operateEvents={};

</script>
</body>
</html>

5. server 模式

單頁版

table.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'table.jsp' starting page</title>
<!-- 核心 css -->
<link rel="stylesheet" href="third/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
    href="third/bootstrap-table/src/bootstrap-table.css">
<link rel="stylesheet"
    href="third/bootstrap-editable/bootstrap-editable.css">

</head>

<body>
    <div class="container">
        <!-- 如果有條件，查詢表單ID名必須為condition-form --> 
        <form id="condition-form">
            用戶名<input name="name" value="a"> 年齡<input name="age"
                value="1"> <input type="button" value="搜索">
        </form>

        <div id="toolbar">
            <button id="remove" class="btn btn-danger">
                <i class="glyphicon glyphicon-remove"></i> Delete
            </button>
            <button id="add" class="btn btn-primary">
                <i class="glyphicon glyphicon-ok"></i> Insert
            </button>
        </div>
        <!-- 加載bootstraptable的表格，ID名稱必須為bootstrap-table -->
        <table id="bootstrap-table"></table>
    </div>

    <!-- 核心 js -->
    <script src="third/jquery/jquery-3.3.1.min.js"></script>
    <script src="third/bootstrap/js/bootstrap.min.js"></script>
    <script src="third/bootstrap-table/src/bootstrap-table.js"></script>
    <script
        src="third/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>
    <script
        src="third/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js"></script>

    <script type="text/javascript">

        $("input[type='button']").click(function() {
            $("#bootstrap-table").bootstrapTable("refresh")
        });

        //bootstrap-table初始化
        $("#bootstrap-table").bootstrapTable({
            url : "StudentServlet2", //請求后臺的URL（*）

            // 此間是與client不一樣的地方=======================開始
            contentType : "application/x-www-form-urlencoded",
            sidePagination : "server", //分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
            //修改請求參數(shù)，不設(shè)置則有默認值 ，返回值必須是一個對象
            queryParams : function(params) {
                var search = {};
                //查詢條件 
                $.each($("#condition-form").serializeArray(), function(i, field) {
                    search[field.name] = field.value
                });
                search.pageSize = params.limit;
                search.pageNum = params.offset / params.limit + 1;
                search.orderByColumn = params.sort;
                search.isAsc = params.order;
                return search;
            },
            method : 'POST', //請求方式（*）
            toolbar : '#toolbar', //工具按鈕用哪個容器
            search : false, //是否顯示表格搜索
            showFooter : false, //顯示底部，默認不顯示
            sortName : 'name',
            sortOrder : "asc", //排序方式
            // 此間是與client不一樣的地方=======================結(jié)束

            striped : true, //是否顯示行間隔色
            cache : false, //是否使用緩存，默認為true，所以一般情況下需要設(shè)置一下這個屬性（*）
            pagination : true, //是否顯示分頁（*）
            showPaginationSwitch : true, //顯示切換分頁

            showFullscreen : false, //顯示全屏
            showHeader : true, //顯示頭部，默認顯示
            showExport : true, //顯示導出
            showColumns : true, //是否顯示所有的列（選擇顯示的列）
            showRefresh : true, //是否顯示刷新按鈕
            sortable : true, //是否啟用排序
            pageNumber : 1, //初始化加載第一頁，默認第一頁,并記錄
            pageSize : 3, //每頁的記錄行數(shù)（*）
            pageList : [ 3, 6, 9 ], //可供選擇的每頁的行數(shù)（*）

            strictSearch : true,
            minimumCountColumns : 2, //最少允許的列數(shù)
            clickToSelect : true, //是否啟用點擊選中行
            uniqueId : "id", //每一行的唯一標識，一般為主鍵列
            showToggle : true, //是否顯示詳細視圖和列表視圖的切換按鈕
            cardView : false, //是否顯示詳細視圖
            detailView : false, //是否顯示父子表
            columns : [

                {
                    field : 'state',
                    checkbox : true,
                    align : 'center',
                    valign : 'middle'
                },
                {
                    title : '學號',
                    field : 'id',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                },
                {
                    title : '姓名 ',
                    field : 'name',

                    sortable : true,
                    editable : false,
                    align : 'center'
                }, {
                    title : '年齡',
                    field : 'age',

                    sortable : true,
                    editable : false,
                    align : 'center'
                }, {
                    title : '性別',
                    field : 'gender',
                    sortable : true,
                    align : 'center'
                }, {
                    title : '操作',
                    field : 'operate',
                    align : 'center',
                }

            ]
        });
    </script>
</body>
</html>

TableInfo.java

@Data
public class TableInfo<T> {
  //數(shù)據(jù)庫總行數(shù)
private int total;
  //當前頁的數(shù)據(jù)
private List<T> rows;
}

StudentServlet.java

@WebServlet("/StudentServlet2")
public class StudentServlet2 extends HttpServlet {
private static final long serialVersionUID = 1L;

protected void doPost(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {

    request.setCharacterEncoding("UTF-8");
    response.setContentType("text/html;charset=utf-8");
    PrintWriter out = response.getWriter();

      //獲取請求參數(shù)，目前有五個(查詢條件 ，當前頁，頁面大小，分頁字段，分頁大小)

    //將來應(yīng)該從service獲取
    List<Student> students = new ArrayList<Student>();
    students.add(new Student(1, "1", 1, "1", "1"));
    students.add(new Student(2, "2", 1, "1", "1"));
    students.add(new Student(3, "3", 1, "1", "1"));
    // students.add(new Student(4,"5",1,"1","1"));
    // students.add(new Student(5,"6",1,"1","1"));

      //設(shè)置tableInfo對象
    TableInfo<Student> tableInfo = new TableInfo<Student>();
    tableInfo.setTotal(10);
    tableInfo.setRows(students);

    out.println(JSON.toJSON(tableInfo));

}

}

封裝版

common.js

(function($) {
$.extend({
    table : {
        init : function(options) {
            $("#bootstrap-table").bootstrapTable({

                url : options.url, //請求后臺的URL（*）
                columns : options.columns,
                sortName : options.sortName,
                sortOrder : options.sortOrder, //排序方式

                contentType : "application/x-www-form-urlencoded",
                sidePagination : "server", //分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
                queryParams : function(params) {
                    var search = {};
                    $.each($("#condition-form").serializeArray(), function(i, field) {
                        search[field.name] = field.value
                    });
                    search.pageSize = params.limit;
                    search.pageNum = params.offset / params.limit + 1;
                    search.orderByColumn = params.sort;
                    search.isAsc = params.order;
                    return search;
                },
                method : 'POST', //請求方式（*）
                toolbar : '#toolbar', //工具按鈕用哪個容器
                search : false, //是否顯示表格搜索
                showFooter : false, //顯示底部，默認不顯示
                striped : true, //是否顯示行間隔色
                cache : false, //是否使用緩存，默認為true，所以一般情況下需要設(shè)置一下這個屬性（*）
                pagination : true, //是否顯示分頁（*）
                showPaginationSwitch : true, //顯示切換分頁
                showFullscreen : false, //顯示全屏
                showHeader : true, //顯示頭部，默認顯示
                showExport : true, //顯示導出
                showColumns : true, //是否顯示所有的列（選擇顯示的列）
                showRefresh : true, //是否顯示刷新按鈕
                sortable : true, //是否啟用排序
                pageNumber : 1, //初始化加載第一頁，默認第一頁,并記錄
                pageSize : 3, //每頁的記錄行數(shù)（*）
                pageList : [ 3, 6, 9 ], //可供選擇的每頁的行數(shù)（*）

                strictSearch : true,
                minimumCountColumns : 2, //最少允許的列數(shù)
                clickToSelect : true, //是否啟用點擊選中行
                uniqueId : "id", //每一行的唯一標識，一般為主鍵列
                showToggle : true, //是否顯示詳細視圖和列表視圖的切換按鈕
                cardView : false, //是否顯示詳細視圖
                detailView : false, //是否顯示父子表

            });
        }
    },
    treeTable : {}
})
})(jQuery);

table.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<title>My JSP 'table.jsp' starting page</title>
<!-- 核心 css -->
<link rel="stylesheet" href="third/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet"
href="third/bootstrap-table/src/bootstrap-table.css">
<link rel="stylesheet"
href="third/bootstrap-editable/bootstrap-editable.css">

</head>

<body>
<div class="container">
    <form id="condition-form">
        用戶名<input name="name" value="a"> 年齡<input name="age"
            value="1"> <input type="button" value="搜索">
    </form>

    <div id="toolbar">
        <button id="remove" class="btn btn-danger">
            <i class="glyphicon glyphicon-remove"></i> Delete
        </button>
        <button id="add" class="btn btn-primary">
            <i class="glyphicon glyphicon-ok"></i> Insert
        </button>
    </div>

    <table id="bootstrap-table"></table>
</div>

<!-- 核心 js -->
<script src="third/jquery/jquery-3.3.1.min.js"></script>
<script src="third/bootstrap/js/bootstrap.min.js"></script>
<script src="third/bootstrap-table/src/bootstrap-table.js"></script>
<script
    src="third/bootstrap-table/src/extensions/export/bootstrap-table-export.js"></script>
<script
    src="third/bootstrap-table/src/extensions/editable/bootstrap-table-editable.js"></script>
<script src="third/common.js"></script>

<script type="text/javascript">

    var options = {
        url : "StudentServlet2",
        sortName : "name",
        sortOrder : "asc",
        columns : [
            {
                field : 'state',
                checkbox : true,
                align : 'center',
                valign : 'middle'
            },
            {
                title : '學號',
                field : 'id',
                align : 'center',
                valign : 'middle',
                sortable : true
            },
            {
                title : '姓名 ',
                field : 'name',

                sortable : true,
                editable : false,
                align : 'center'
            }, {
                title : '年齡',
                field : 'age',

                sortable : true,
                editable : false,
                align : 'center'
            }, {
                title : '性別',
                field : 'gender',
                sortable : true,
                align : 'center'
            }, {
                title : '操作',
                field : 'operate',
                align : 'center',
            }
        ]
    };

    $.table.init(options);

    $("input[type='button']").click(function() {
        $("#bootstrap-table").bootstrapTable("refresh")
    });

</script>
</body>
</html>

向AI問一下細節(jié)

推薦閱讀：

免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。

上一篇新聞：
HTML 5 標簽、屬性、事件及瀏覽器兼容性速查表
下一篇新聞：
(7.0系統(tǒng)設(shè)備)安卓神器XPOSED框架沒Root安裝指南

猜你喜歡

AI
助
手

產(chǎn)品服務(wù)

地區(qū)劃分

專題活動

幫助支持

關(guān)于我們

售后咨詢

7*24小時在線電話：400-100-2938

7*24小時在線 QQ：800811969

關(guān)注億速云

億速云公眾號

手機網(wǎng)站二維碼

<small id="s05ip"><menuitem id="s05ip"></menuitem></small>