Bootstrap Table - reorderableColumns demo

Bootstrap Table - reorderableColumns demo. Simple demo of reorderableColumns extension, first created 19/8/2016 and possibly updated since

by clempe

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>
<script src="http://issues.wenzhixin.net.cn/bootstrap-table/assets/bootstrap-table/src/extensions/reorder-columns/bootstrap-table-reorder-columns.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"></script>
<link rel="stylesheet" href="https://rawgit.com/akottr/dragtable/master/dragtable.css">
<div class="container">


<table id="table"
 data-toggle="table"
               data-show-columns="true"
               
              
>
</table>
</div>

JavaScript

// Bootstrap Table - reorderableColumns demo. Simple demo of reorderableColumns extension, first created 19/8/2016 and possibly updated since
var headers = [{
  name: "Name",
  dataField: "name"
}, {
  name: "Stars",
  dataField: "stargazers_count"
}, {
  name: "Forks",
  dataField: "forks_count"
}, {
  name: "Description",
  dataField: "description"
}, ];

function getData() {
  var data = '[{"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":"4","description":"my blog"},{"name":"bootstrap-table","stargazers_count":"526","forks_count":"122","description":"An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)"},{"name":"scutech-redmine","stargazers_count":"6","forks_count":"3","description":"Redmine notification tools for chrome extension."}]';

  return JSON.parse(data);
}

function loadData() {
  $('#table').bootstrapTable({
    data: getData(),
    useRowAttrFunc: true,
    onReorderRowsDrop: function() {
      console.log(table, row);
    }
  });
}

function buildTable() {
  var html = '<id="table"><thead><tr>';
  for (var i = 0; i < headers.length; i++) {
    var h = headers[i];
    html += '<th data-sortable="true" data-field="' + h.dataField + '">' + h.name + '</th>';
  }

  html += '</tr></thead></table>'
  $("#table").html(html);

  loadData();
}



buildTable();