Update Row
Updates a row in bootstrap table
by jimkennelly
HTML
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<table id="bsTable" data-toggle="table" data-unique-id="forks_count" data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/">
<thead>
<tr>
<th data-field="name">Name</th>
<th data-field="stargazers_count" data-formatter="formatStars">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
<button>Hello
</button>
JavaScript
var dd = [{
"name": "bootstrap-table",
"stargazers_count": "5996",
"forks_count": 122,
"description": "An extended Bootstrap table v2 and v3) "
}, {
"name": "multiple-select",
"stargazers_count": "288",
"forks_count": 150,
"description": "A jQuery plugin to select multiple elements with checkboxes :)"
}, {
"name": "bootstrap-show-password",
"stargazers_count": "32",
"forks_count": 11,
"description": "Show/hide password plugin for twitter bootstrap."
}, {
"name": "blog",
"stargazers_count": "13",
"forks_count": 1,
"description": "my blog"
}, {
"name": "scutech-redmine",
"stargazers_count": "6",
"forks_count": 3,
"description": "Redmine notification tools for chrome extension."
},
];
$table = $("#bsTable");
$table.bootstrapTable({
data: dd
});
// for any dynamic content with a btnSave class
$table.on('click', '.btnSave', function() {
var id = $(this).data("id");
var dataRow = $table.bootstrapTable('getRowByUniqueId', id);
dataRow.stargazers_count = parseInt(dataRow.stargazers_count) + 1;
$table.bootstrapTable('updateByUniqueId', id, dataRow);
});
//define an odd/even function
function isOdd(num) {
return num % 2;
}
//format the my stars function (odd -> green or even -> orange)
function formatStars(value, row, index) {
return '<button class="btn ' + (isOdd(value) ? 'btn-success' : 'btn-warning') + ' btnSave" data-id="' +...