JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.7.0/bootstrap-table.min.css">
<table id="table" class="table"></table>
<button id="btn">Click me</button>
JavaScript
window.actionEvents = {
'click .up': function (e, value, row, index) {
var source = JSON.stringify($('#table').bootstrapTable('getData')[index]);
var target = JSON.stringify($('#table').bootstrapTable('getData')[index - 1]);
$('#table').bootstrapTable('updateRow', {'index':index - 1, 'row': JSON.parse(source)});
$('#table').bootstrapTable('updateRow', {'index':index, 'row': JSON.parse(target)});
},
'click .down': function (e, value, row, index) {
var source = JSON.stringify($('#table').bootstrapTable('getData')[index]);
var target = JSON.stringify($('#table').bootstrapTable('getData')[index + 1]);
$('#table').bootstrapTable('updateRow', {'index':index + 1, 'row': JSON.parse(source)});
$('#table').bootstrapTable('updateRow', {'index':index, 'row': JSON.parse(target)});
}
}
function fmtMoveUp(value) {return '<a class="action up" href="javascript:void(0)" title="Move up">+</a>';};
function fmtMoveDown(value) {return '<a class="action down" href="javascript:void(0)" title="Move down">-</a>';};
var fakedata= [
{"title":"new title 1", "name":"name 1"},
{"title":"new title 2", "name":"name 2"},
{"title":"new title 3", "name":"name 3"},
{"title":"new title 4", "name":"name 4"},
]
$("#table").bootstrapTable({
data:fakedata,
classes: 'table-striped table-condensed table-hover btable',
columns: [
{ field:'Up', title:'', align:'center', width:20, formatter:fmtMoveUp, events:actionEvents},
{ field:'Down', title:'', align:'center', width:20, formatter:fmtMoveDown, events:actionEvents},
{ field:'title', title:'title', align:'center'},
{ field:'name', title:'name'}
]
});
$('#btn').click(function() {
var tableData = $('#table').bootstrapTable('getData');
console.log(tableData);
});