CODEWITHSUNDEEP
twitter-bootstrapbootstrap-table
Joseph Daudi
Joseph Daudi

Reputation: 1587

How do you add Bootstrap buttons in Bootstrap Table

How do you add Bootstrap buttons in Bootstrap Table

Upvotes: 19

Views: 68235

Answers (5)

Carson
Carson

Reputation: 8008

@Joseph Daudi answer is good, and I would like to make some additions.

create a custom fieldfor example tableAction 👈 see a runnable example and use formatted set the value

formatter: (value, row, index, field) => {
          curID = row[UNIQUE_ID]
          return [
            `<button type="button" class="btn btn-default btn-sm" onclick="deleteItem(${curID})">`,
            `<i class="far fa-trash-alt"></i>`,
            `</button>`,

            `<button type="button" class="btn btn-default btn-sm">`,
            `<i class="far fa-thumbs-up"></i>`,
            `</button>`
          ].join('')
        }

a runnable example

<!doctype html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <!-- fontawesome 5 -->
  <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/js/all.min.js"></script>

  <!-- jquery -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <!-- bootstrap -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

  <!-- bootstrap-table-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css"/>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script>

</head>

<body>
<table id="bs-table" class="table table-striped table-blue"
       data-show-columns="true">
</table>
</body>

<script>
  const TABLE = document.querySelector("table")
  const TABLE_ID = TABLE.getAttribute("id")
  const table = $(`#${TABLE_ID}`)
  const UNIQUE_ID = 'id'

  function createBSTable() {

    const columns = [
      {field: "id", title: "ID"},
      {field: "title", title: "Title"},
      {
        field: "tableAction", title: "Action",
        formatter: (value, row, index, field) => {
          curID = row[UNIQUE_ID]
          return [
            `<button type="button" class="btn btn-default btn-sm" onclick="deleteItem(${curID})">`,
            `<i class="far fa-trash-alt"></i>`,
            `</button>`,

            `<button type="button" class="btn btn-default btn-sm">`,
            `<i class="far fa-thumbs-up"></i>`,
            `</button>`
          ].join('')
        }
      }
    ]

    table.bootstrapTable()
    table.bootstrapTable('refreshOptions',
      {
        columns: columns,
        url: "https://jsonplaceholder.typicode.com/photos",
        // data: dataArray,
        height: 768,
        uniqueId: "id",
        striped: true,
        pagination: true,
        sortable: true,
        pageNumber: 1,
        pageSize: 10,
        pageList: [10, 25, 50, 100],
        search: true,
        showToggle: true,
        searchHighlight: true,
      }
    )
    table.bootstrapTable('refresh')
  }

  function deleteItem(curID) {
    if (!confirm('Are you sure you want to delete this item?')) {
      return
    }

    const ids = [curID]
    table.bootstrapTable('remove', {
      field: UNIQUE_ID,
      values: ids,
    })
  }

  (
    () => {
      window.onload = () => {
        createBSTable()
      }
    }
  )()
</script>
</html>

Find Icon

Upvotes: 5

Revathi Sudarsan
Revathi Sudarsan

Reputation: 11

you can also try...the following if you are aiming for bootstrap buttons

            function TableActions(value, row, index) {
                return '<button class="btn btn-primary">Add</button>'
            }

Upvotes: 0

swanf
swanf

Reputation: 109

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.

Upvotes: 3

user5910819
user5910819

Reputation: 

<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>

Upvotes: 12

Joseph Daudi
Joseph Daudi

Reputation: 1587

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 

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.

Upvotes: 29

Related Questions