Tuesday, May 30, 2017

How to use BootstrapTable to bind data json from action url

 $table.bootstrapTable({
     locale: 'vi',
     classes: 'table table-condensed',
     pagination: true,
     height: 'auto',
     pageSize: 15,
     pageList: [10, 15, 20, 30, 50, 100],
     paginationFirstText: 'Trang đầu',
     paginationPreText: 'Trước',
     paginationNextText: 'Sau',
     paginationLastText: 'Trang cuối',
     showHeader: true,
     showFooter: true,
     formatShowingRows: function (pageFrom, pageTo, totalRows) {
       return 'Tổng:' + totalRows;
     },
     formatRecordsPerPage: function (pageNumber) {
       return 'Hiển thị' + pageNumber + ' bản ghi trên trang';
     },
     formatNoMatches: function () {
       return 'Dữ liệu trống';
     },
     method: 'post',
     sidePagination: 'server',
     url: '/Admin/ReportCashSuplier/GetAllReportCashSupplier',
     queryParams: function (p) {
       return {
         offset: p.offset,
         limit: p.limit,
         search : {
           FromDate: $('#txtFDate').parent().data("DateTimePicker").date(),
           ToDate: $("#txtTDate").parent().data("DateTimePicker").date(),
           SupplierCode: $('#txtPartnerCode option:selected').val(),
           VendorId: $('#txtProductCode option:selected').val()
         }
       };
     },
     responseHandler: function (res) {
       $total = res.total;
       $statistic = res.statistic;
       return {
         total: res.total,
         rows: res.data == null ? [] : res.data
       };
     },
     columns: [
        {
         field: 'SupplierName',
         title: 'NCCDV',
         titleTooltip: 'Nhà cung cấp dịch vụ',
         valign: 'middle',
         width: '120px',
         footerFormatter: function (data) {
           return 'Tổng:'.bold();
         }
        },{
         field: 'CategoryName',
         title: 'Sản phẩm',
         valign: 'middle',
         width: '120px',
       }, {
         field: 'SumAmount',
         title: 'Doanh số',
         width: '100px',
         align: 'right',
         valign: 'middle',
         formatter: function (value) {
           return value != null ? value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         },
         footerFormatter: function (data) {
           return $statistic.TotalAmount != null ? $statistic.TotalAmount.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         }
       }, {
         field: 'SumCount10',
         title: '10.000',
         width: '100px',
         align: 'center',
         valign: 'middle',
         formatter: function (value) {
           return value != null ? value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         },
         footerFormatter: function (data) {
           return $statistic.SumCount10 != null ? $statistic.SumCount10.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         }
       }, {
         field: 'SumCount20',
         title: '20.000',
         width: '100px',
         align: 'center',
         valign: 'middle',
         formatter: function (value) {
           return value != null ? value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         },
         footerFormatter: function (data) {
           return $statistic.SumCount20 != null ? $statistic.SumCount20.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         }
       }, {
         field: 'SumCount30',
         title: '30.000',
         width: '100px',
         align: 'center',
         valign: 'middle',
         formatter: function (value) {
           return value != null ? value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         },
         footerFormatter: function (data) {
           return $statistic.SumCount30 != null ? $statistic.SumCount30.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         }
       }, {
         field: 'SumCount50',
         title: '50.000',
         width: '100px',
         align: 'center',
         valign: 'middle',
         formatter: function (value) {
           return value != null ? value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         },
         footerFormatter: function (data) {
           return $statistic.SumCount50 != null ? $statistic.SumCount50.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         }
       }, {
         field: 'SumCount100',
         title: '100.000',
         width: '100px',
         align: 'center',
         valign: 'middle',
         formatter: function (value) {
           return value != null ? value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         },
         footerFormatter: function (data) {
           return $statistic.SumCount100 != null ? $statistic.SumCount100.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         }
       }, {
         field: 'SumCount200',
         title: '200.000',
         width: '100px',
         align: 'center',
         valign: 'middle',
         formatter: function (value) {
           return value != null ? value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         },
         footerFormatter: function (data) {
           return $statistic.SumCount200 != null ? $statistic.SumCount200.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         }
       }, {
         field: 'SumCount500',
         title: '500.000',
         width: '100px',
         align: 'center',
         valign: 'middle',
         formatter: function (value) {
           return value != null ? value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         },
         footerFormatter: function (data) {
           return $statistic.SumCount500 != null ? $statistic.SumCount500.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         }
       }, {
         field: 'SumCount1000',
         title: '1.000.000',
         width: '100px',
         align: 'center',
         valign: 'middle',
         formatter: function (value) {
           return value != null ? value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         },
         footerFormatter: function (data) {
           return $statistic.SumCount1000 != null ? $statistic.SumCount1000.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') : 0;
         }
       }
     ]
   });
=>>> USE $btnSearch.on("click", function(){ $table.bootstrapTable('resetView'); if($formSearch.valid()) $table.bootstrapTable('refresh'); });

No comments:
Write comments