标签: bootstrap-table

我想在bootstrap-table中添加一个列的链接.这该怎么做？

我在1.6版本中使用Bootstrap-table插件.我想动态改变表高度 - 这可能吗？我无法弄清楚如何做到这一点......

<div class="main">
    <button id="resetView" class="btn btn-default">Reset View</button>

    <table id="table"
           data-toggle="table"
           data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/"
           data-height="200">
        <thead>
        <tr>
            <th data-field="name">Name</th>
            <th data-field="stargazers_count">Stars</th>
            <th data-field="forks_count">Forks</th>
            <th data-field="description">Description</th>
        </tr>
        </thead>
    </table>

$(function () {
    setTimeout(function () {
        $('.main').width('80%'); // Change table width

        $('.main').height('100'); // it won't work
        $('#table').data('height', 100); // this also won't work
        $('#table').height('100'); // and of course this won't work..
    }, 1000);

    $('#resetView').click(function () {
        $('#table').bootstrapTable('resetView');
    });
});

工作小提琴 http://jsfiddle.net/e3nk137y/558/

我基于这个例子:https: //jsfiddle.net/hL0pvaty/

但是popover必须包含一个html div,因此,我想要的是第一个和第二个链接之间的混合:https: //maxalley.wordpress.com/2014/08/19/bootstrap-3-popover-with-html -内容/

这是js代码:

$(document).on("click", ".show-popover-div", function (e) {
    $('[rel="popover"]').popover({
        container: 'body',
        html: true,
        content: function () {
            var clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
            return clone;
        }
    }).click(function(e) {
        e.preventDefault();
    });
});

这有效,但迫使我双击链接,只需点击一下即可.

有一件事,这个例子非常好,但我需要应用一些更改,我想要相同的,但从链接,我打开一个加载json文件的模态窗口,

json文件有一个打开popover的图像链接,就像你给我看的那样(我使用bootstrap-table来加载json文件)

这是json文件:

[
    {
        "col1": "<a href='#'>13560431</a>",
        "col2": "<a href='#' class='popup-window' data-placement='left'><img src='img/ico_add_td.png' /></a>"
    },
    {
        "col1": "<a href='#'>44560422</a>",
        "col2": "<a href='#' class='popup-window' data-placement='left'><img src='img/ico_add_td.png' /></a>"
    }
]

这是使用bootstrap-table加载json文件的js代码:

$("#table-alert2").bootstrapTable({
    url: 'data-table-alert2b.json',
    columns: [{
        field: 'col1'
    }, {
        field: 'col2'   
    }, …

我在我的一个网页中使用bootstrap表.
Bootstrap表:链接

我有一个有趣的问题:

正如您所见,boostrap表文本是中文的.如何改变语言？

我正在使用Bootstrap表来显示用户数据。当前它正在使用客户端分页，但是我想使用服务器端分页，因为我的记录非常庞大。如果有人可以帮助我，将不胜感激。

 <table id="tblsers" data-height="400" style="width: 100%;margin-top:0 !important" class="bTable" data-search="true"></table>

<script>
    $(document).ready(function () {
        getUsers();
    });
    function getUsers() {

        $.ajax({
            type: "POST",
            url: "Data.aspx/getUsers",
            contentType: "application/json; charset=utf-8",
        success: function (response) {
            debugger
            var table = "";

            var $tblRegisteredUsersTbl = $('#tblRegisteredUsers');

            if (response == "none") {

                $tblRegisteredUsersTbl.bootstrapTable('destroy');
                table = "<tr style='font-weight: bold'><td>No records</td></tr>"
                $("#tblRegisteredUsers").html(table);
                $("#tblRegisteredUsers").children("tbody").css("text-align", 'center');
                $("#tblRegisteredUsers").addClass("table table-hover");

            } else {


                $("#tblRegisteredUsers").children("tbody").css("text-align", 'left');
                var registeredUsers = JSON.parse(response.d);
                $($tblRegisteredUsersTbl).hide();
                $tblRegisteredUsersTbl.bootstrapTable('destroy');
                $tblRegisteredUsersTbl.bootstrapTable({
                    method: 'get',
                    columns: [
                    {
                        field: 'SNo', title: 'S.No', width: 10, align: …

使用 Node + Jade 正在创建一个将显示大量用户列表的表，所以我决定使用 bootstrap-table 并且我发现了一个有很多可能性的很棒的库。

我目前使用分页来不显示表格中的信息，目前表格只有两列，第一列是选择多个用户的复选框，第二列只是用户的用户名。该表看起来不错，但我会添加一个链接来详细介绍用户（例如：/user/:id），并将此链接添加到我的第二列。

目前我的代码如下所示：

table(data-toggle='table', data-url='users.json', data-pagination='true', data-search='true', data-striped='true')
  thead
    tr
      th(data-checkbox='true')
      th(data-field='username') Username

我只想在包含用户名的文本中添加一个超链接

我正在使用这个引导表 http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html#client-side-pagination-table

它的默认页面大小为10.如何在加载网格时将其更改为5或任何内容.

它提供了选择它的选项,data-page-list="[5,10]"但默认情况下在加载时保持10.

我正在使用这个bootstrap-table。我想将一张桌子嵌套到另一张桌子中。

$(document).ready(function() {
  var t = [{
    "id": "1",
    "name": "john",
  }, {
    "id": "2",
    "name": "ted"
  }];


  //TABLE 1
  $('#summaryTable').bootstrapTable({
    data: t,
    detailFormatter: detailFormatter
  });

  function detailFormatter(index, row, element) {
    $(element).html(row.name);
    $(element).html(function() {
      //I was thinking of putting the code here, but I don't know how to do it so it will work,
      //except javascript, it needs to be put this html code <table id="detailTable"></table>

    });


    //   return [

    //    ].join('');
  }

  //TABLE 2
  var t2 = …

我使用 React Table (react bootstrap table-2) 在页面中显示一个表，并使用从数据库 API 调用的数据填充它。我想让其中一列中的值显示为链接（hrefs）。此特定列仅包含 URL。如何在react bootstrap table-2 中实现这个？

import React, { useState, useEffect } from "react";
import logo from "./logo.svg";
import "./App.css";
import axios from "axios";
import BootstrapTable from "react-bootstrap-table-next";
import paginationFactory from "react-bootstrap-table2-paginator";
import * as ReactBootstrap from "react-bootstrap";
import filterFactory, { textFilter } from "react-bootstrap-table2-filter";
import ToolkitProvider, { Search } from "react-bootstrap-table2-toolkit";

const App = () => {
  const [list, setList] = useState([]);
  const [loading, setLoading] = useState(false);
  const { SearchBar } = …

我有这个 bootstrap-table 数据表，加载所有数据后，该消息继续显示。任何人都知道为什么会发生这种情况？先感谢您。

<table class='table table-striped table-hover' id='main_table' data-url={{ db_json }} data-click-to-select='true' data-filter-control="true" clickToSelect='true'>
    <thead>
        <tr>
          <th data-checkbox="true" data-checkbox-enabled="true"></th>
          <th data-field="ID" data-visible="false">Id</th>
          <th data-field="data1" data-filter-control="input">data1</th>
          <th data-field="data2" data-filter-control="select">data2</th>
          <th data-field="data3" data-filter-control="select">data3</th>

        </tr>
    </thead>
</table>