Bootstrap Table
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/wenzhixin/bootstrap-table/master/src/bootstrap-table.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/css/bootstrap-editable.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/editable/bootstrap-table-editable.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/x-editable/1.5.0/bootstrap3-editable/js/bootstrap-editable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/filter-control/bootstrap-table-filter-control.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/extensions/export/bootstrap-table-export.js"></script>
<div id="toolbar" calss="btn-group">
<button id="removeSelection" class="btn btn-default">حذف انتخاب شده
<i class="glyphicon glyphicon-remove"></i>
</button>
<button id="removeAll" class="btn btn-default">
حذف همه
<i class="glyphicon glyphicon-remove"></i>
</button>
<button id="addRow" class="btn btn-default"><i class="glyphicon glyphicon-plus"></i></button>
</div>
<table data-toggle="table" data-url="https://api.myjson.com/bins/aeezn"
data-filter-control="true"
data-filter-show-clear="true"
>
<thead>
<tr>
<th data-field="id" data-filter-control="select" data-filter-strict-search="true">id</th>
<th data-field="state" data-filter-control="select" data-filter-strict-search="true">state</th>
<th data-field="name" data-filter-control="select" data-filter-strict-search="true">name</th>
</tr>
</thead>
</table>
CSS
.no-filter-control {
height: 34px;
}
.filter-control {
margin: 0 2px 2px 2px;
}
JavaScript
var $table = $('#table'),
$removeSelectionBtn = $('#removeSelection'),
$removeAllBtn = $('#removeAll'),
$addRowBtn = $('#addRow');
window.operateEvents = {
'click .like': function (e, value, row, index) {
alert('برای مشاهده میتوان از این شی استفاده کرده, row: ' + JSON.stringify(row));
},
'click .remove': function (e, value, row, index) {
var txt;
var msgDialog = confirm("آیا مایل به حذف ردیف میباشید ؟");
if (msgDialog == true) {
txt = "ردیف مورد نظر حذف شد";
$table.bootstrapTable('remove', {
field: 'id',
values: [row.id]
});
alert(txt)
} else {
txt = "عملیات حذف لغو شد";
alert(txt)
}
}
};
$(function () {
$removeSelectionBtn.click(function () {
var msgDialog = confirm("آیا مطمئن از حذف ردیفهای انتخابی هستید ؟");
if (msgDialog) {
var ids = $.map($table.bootstrapTable('getSelections'), function (row) {
return row.id;
});
txt = "عملیات حذف با موفقیت انجام شد";
$table.bootstrapTable('remove', {
field: 'id',
values: ids
});
alert(txt)
}else{
txt = "عملیات حذف لغو شد";
alert(txt)
}
});
$removeAllBtn.click(function () {
var msgDialog = confirm("آیا مطمئن از حذف کل اطلاعات موجود در جدول هستید ؟");
if (msgDialog == true) {
txt = "عملیات حذف با موفقیت انجام شد";
$table.bootstrapTable('removeAll')
alert(txt)
} else {
txt = "عملیات حذف لغو شد";
alert(txt)
}
});
$addRowBtn.unbind('click').click(function (params) {
var rows = [],
rowData = [];
$('#addRowModal input').each(function (key , val) {
val.value = '';
})
...