twitter-bootstrap 如何在 Bootstrap 表中添加 Bootstrap 按钮

How do you add Bootstrap buttons in Bootstrap Table

提问by Joseph Daudi

How do you add Bootstrap buttons in Bootstrap Table

如何在Bootstrap 表中添加 Bootstrap 按钮

回答by Joseph Daudi

I've already figured out the solution. I'd like to share it with everyone.

我已经想出了解决办法。我想与大家分享。

This is my table:

这是我的表：

 <table
    id="table"
    data-toggle="table"
    data-pagination="true"
    data-url="data/RegisteredVisitors.json"
    data-show-refresh="true"
    data-show-toggle="true"
    data-show-columns="true"
    data-search="true"                          
    data-show-pagination-switch="true"
    data-id-field="visitor_id"
    data-page-list="[10, 25, 50, 100, ALL]"
    data-show-footer="false">    
<thead>
<tr>    
    <th data-field="visitor_id" data-checkbox="false" >#</th>
    <th data-field="visitor_number" data-formatter="VisitorDetails">Visitor #</th>
    <th data-field="visitor_names" data-formatter="VisitorDetails" data-sortable="true">Visitor Names</th>
    <th data-field="phone_number"  data-sortable="true">Phone Number</th>
    <th data-field="matter_type"  data-sortable="true">Matter Type</th>
    <th data-field="office_name"  data-sortable="true">Office Attending</th>
    <th data-field="time_in"  data-sortable="true">Time In</th>
    <th data-field="time_out" data-sortable="true">Time Out</th>
    <th data-field="last_visit"  data-sortable="true">Last Visit</th>
    <th data-formatter="TableActions">Action</th>
</tr>
</thead>
</table>

This is my jQuery function

这是我的 jQuery 函数

function TableActions (value, row, index) {
    return [
        '<a class="like" href="javascript:void(0)" title="Edit">',
        '<i class="glyphicon glyphicon-pencil"></i>',
        '</a> ',
        '<a class="danger remove" href="javascript:void(0)" data-visitorserial="'+row.visitor_id+'" data-visitornames="'+row.visitor_names+'" data-visitorid="'+row.visitor_number+'" data-toggle="modal" data-target="#VisitorDelete" title="Remove">',
        '<i class="glyphicon glyphicon-trash"></i>',
        '</a>'
    ].join('');
}

Finally got it running.

终于可以运行了

回答by Joseph Daudi

<table class="table table-hover">
    <thead>
        <tr>
            <th>Button</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><button type="button" class="btn btn-primary">button</button></td>
        </tr>
    </tbody>
</table>

回答by swanf

For me, I did this.

对我来说，我做到了。

<table class="table table-striped">
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Operation</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>
      <button type="button" class="btn btn-outline-primary" onclick="location.href='#'">Edit</button>
      </td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>
      <button type="button" class="btn btn-outline-primary" onclick="location.href='#'">Edit</button>  
      </td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>
      <button type="button" class="btn btn-outline-primary" onclick="location.href='#'">Edit</button>  
      </td>
    </tr>
  </tbody>
</table>

The outcome should look like something like this.

结果应该是这样的。