bootstraptable 表格操作

最基本的操作，加上分页
html

<table id='tblByLead'>

</table>

javascript

('#tblByLead').bootstrapTable({
  striped: true,
  pagination: true,
  pageSize: 2,
  pageList: [10, 25, 50, 100, 200],
  search: true,
  columns: [{
    title: 'Lead Name',
    sortable: true
  }, {
    title: 'Percentage',
    sortable: true
  }, ],
  data: [{
    '0': 'Ramesh',
    '1': '55'
  }, {
    '0': 'Pavan',
    '1': '55'
  }, {
    '0': 'Suresh',
    '1': '57'
  }]
});

给表格加删除按钮

<table
  id="table"
  data-toggle="table"
  data-height="460"
  data-url="json/data1.json">
  <thead>
    <tr>
      <th data-field="id">ID</th>
      <th data-field="name">Item Name</th>
      <th data-field="price">Item Price</th>
      <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">Item Price</th>
    </tr>
  </thead>
</table>

<script>
  var $table = $('#table')

  function operateFormatter(value, row, index) {
    return [
      '<a class="like" href="javascript:void(0)" title="Like">',
      '<i class="fa fa-heart"></i>',
      '</a>  ',
      '<a class="remove" href="javascript:void(0)" title="Remove">',
      '<i class="fa fa-trash"></i>',
      '</a>'
    ].join('')
  }

  window.operateEvents = {
    'click .like': function (e, value, row, index) {
      alert('You click like action, row: ' + JSON.stringify(row))
    },
    'click .remove': function (e, value, row, index) {
      $table.bootstrapTable('remove', {
        field: 'id',
        values: [row.id]
      })
    }
  }
</script>

单击删除按钮，添加提示信息，确认后执行操作

<table
  id="table"
  data-toggle="table"
  data-url="http://......."
  data-serach="true"
  data-show-columns="true"
  data-show-multi-sort="true"
  data-show-export="true"
  data-show-refresh="true"
  data-side-pagination="client"
  data-pagination="true"
  data-page-list="[10,20,50,100,All]"
  data-show-footer="true">
  <thead>
    <tr>
      <th data-sortable="true">Name</th>
      <th data-sortable="true">Template</th>
      <th data-sortable="true">Snapshot</th>
      <th data-sortable="true">Host</th>
      <th data-sortable="true">Data_Store</th>
      <th data-sortable="true">Create_Date</th>
      <th data-field="operate" data-formatter="operateFormatter" data-events="operateEvents">Delete</th>
    </tr>
  </thead>
</table>

<script src="../src.js"></script>

function operateFormatter(value, row, index) {
    return [
      '<a class="remove" href="javascript:void(0)" title="Remove">',
      '<i class="fa fa-trash"></i>',
      '</a>'
    ].join('')
  }

/**
 * Displays overlay with "Please wait" text. Based on bootstrap modal. Contains animated progress bar.
 */
function showPleaseWait() {    
    if (document.querySelector("#pleaseWaitDialog") == null) {
        var modalLoading = '<div class="modal" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false" role="dialog">\
            <div class="modal-dialog">\
                <div class="modal-content">\
                    <div class="modal-header">\
                        <h4 class="modal-title">Please wait...</h4>\
                    </div>\
                    <div class="modal-body">\
                        <div class="progress">\
                          <div class="progress-bar progress-bar-success progress-bar-striped active" role="progressbar"\
                          aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width:100%; height: 40px">\
                          </div>\
                        </div>\
                    </div>\
                </div>\
            </div>\
        </div>';
        $(document.body).append(modalLoading);
    }
  
    $("#pleaseWaitDialog").modal("show");
}

/**
 * Hides "Please wait" overlay. See function showPleaseWait().
 */
function hidePleaseWait() {
    $("#pleaseWaitDialog").modal("hide");
}




function showDelete() {    
    if (document.querySelector("#showDelete") == null) {
        var modalLoading = '<div id="showDelete" class="modal fade" style="display: none;" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<form>
				<div class="modal-header">						
					<h4 class="modal-title">Delete</h4>
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
				</div>
				<div class="modal-body">					
					<p>Are you sure you want to delete these Records?</p>
					<p class="text-warning"><small>This action cannot be undone.</small></p>
				</div>
				<div class="modal-footer">
					<input type="button" class="btn btn-default" data-dismiss="modal" value="Cancel">
					<input type="submit" class="btn btn-danger" value="Delete">
				</div>
			</form>
		</div>
	</div>
</div>';
$(document.body).append(modalLoading);
    }
  
    $("#showDelete").modal("show");
}

window.operateEvents = {
    'click .remove': function (e, value, row, index) {
    showDelete();
    var submit=document.querySelector(".btn-danger")
    submit.onclick=function()
    {
    $("#showDelete").modal("hide");
    showPleaseWait();
    var options={
    type:"post",
    url:"http://mmmm",
    dataType:"json",
    async:true,
    data: JSON.stringify(row),
    success: function(data)
    {
    $("#pleaseWaitDialog").modal("hide");
    switch(data)
    {
    case 'success':
    location.reload();
    return;
    case 'failed':
    $(document).Toasts('create',
    {
    class: 'bg-danger',
    title: 'Ooops',
    body: 'failed',
    timeOut: 8000
    });
    return;
    }
    }
    }
    $.ajax(options);
    }
      return false;
    }
  }

参考
参考
参考