JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="col-md-12">
<table id="table"></table>
</div>
JavaScript
//Bootstrap table configurations
$(document).ready(function () {
$.ajax({
// The URL for the request
url: "AllData",
// Whether this is a POST or GET request
type: "GET",
// The type of data we expect back
dataType: "json",
success: function (data2) {
$('#table').bootstrapTable({
method: 'get',
data: data2,
striped: true,
pagination: true,
pageSize: 10,
pageList: [10, 25, 50, 100, 200],
search: false,
showColumns: false,
showRefresh: false,
height: 610,
minimumCountColumns: 2,
columns: [{
field: 'firstName',
title: 'First Name',
align: 'left',
//visible: false,
valign: 'bottom',
sortable: true
}, {
field: 'lastName',
title: 'Last Name',
align: 'left',
//visible: false,
valign: 'middle',
sortable: true,
}, {
field: 'country',
title: 'Country',
align: 'left',
valign: 'top',
sortable: true,
}, {
field: 'dob',
title: 'Date of Birth',
align: 'Center',
valign: 'bottom',
sortable: true
}, {
field: 'mobile',
title: 'Mobile',
align: 'Center',
valign: 'bottom',
sortable: true
}, {
field: 'email',
title: 'Email',
visible: false,
...