Bootstrap Table

by jimkennelly

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 = '';
        })
       ...