Bootstrap modal makes scrollbar disappear after closing
$(document).on('hidden.bs.modal', '.modal', function () {
$('.modal:visible').length && $(document.body).addClass('modal-open');
});
Showing posts with label JQuery - BoostrapTable. Show all posts
Showing posts with label JQuery - BoostrapTable. Show all posts
Friday, September 8, 2017
Wednesday, June 21, 2017
Tuesday, May 30, 2017
jQuery Validator - Datetime validate custom with "from date" and "to date"
jQuery.validator.addMethod("nulldate", function (value, element, params) {
if (value.length == 0)
return false;
return true;
}, 'Từ ngày phải nhỏ hơn hoặc bằng đến ngày, vui lòng kiểm tra lại');
jQuery.validator.addMethod("beetwenTime", function (value, element, params) {
var formDateTime = moment($(element).parent().data("DateTimePicker").date(), 'MM/DD/YYYY HH:mm');
var toDateTime = moment($(params).parent().data("DateTimePicker").date(), 'MM/DD/YYYY HH:mm');
if (toDateTime.diff(formDateTime, 'minutes') > 0) {
$(params).removeClass('border-error');
return true;
} else {
$(params).addClass('border-error');
return false;
}
}, 'Thời gian từ không được lớn hơn thời gian tới, vui lòng kiểm tra lại!');
jQuery.validator.addMethod("LimitTime", function (value, element, params) {
if ($("#txtTDate").val().length > 0) {
var formDateTime = moment($(params).parent().data("DateTimePicker").date(), 'MM/DD/YYYY HH:mm');
var toDateTime = moment($(element).parent().data("DateTimePicker").date(), 'MM/DD/YYYY HH:mm');
return toDateTime.diff(formDateTime, 'days') > -92;
} else
return true;
}, 'Chỉ tìm kiếm được tối đa 92 ngày');
<div class="col-sm-12">
<div class="col-sm-6">
<!--#region Từ ngày-->
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">Từ ngày</label>
<div class="col-sm-8">
<div class="input-group input-group-sm input-datetime" id="divFromDate">
<input type="text" id="txtFDate" name="d1"
class="form-control input-sm datetime-mask" style="margin-top: 0">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<!--#endregion-->
</div>
<div class="col-sm-6">
<!--#region Đến ngày-->
<div class="form-group form-group-sm">
<label class="col-sm-4 control-label">Đến ngày</label>
<div class="col-sm-8">
<div class="input-group input-group-sm input-datetime" id="divToDate">
<input type="text" id="txtTDate" name="d2"
class="form-control input-sm datetime-mask" style="margin-top: 0">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
<!--#endregion-->
</div>
</div>
$('#divFromDate').data("DateTimePicker").date(Sv.DefaultDate().FormDate);
$('#divToDate').data("DateTimePicker").date(Sv.DefaultDate().ToDate);
////Max date
$('#divFromDate').data("DateTimePicker").maxDate(Sv.DefaultDate().MaxDate);
$('#divToDate').data("DateTimePicker").maxDate(Sv.DefaultDate().MaxDate);
$('#btnSearch').on('click', function () {
$('#txtTDate').rules('add', {
required: true,
messages: {
required: 'Bạn phải nhập/ chọn ngày để tìm kiếm',
}
});
$('#txtFDate').rules('add', {
required: true,
beetwenTime: '#txtTDate',
LimitTime: '#txtTDate',
messages: {
required: 'Bạn phải nhập/ chọn ngày để tìm kiếm',
beetwenTime: 'Từ ngày phải nhỏ hơn hoặc bằng đến ngày.',
//LimitTime: 'Bạn phải nhập/ chọn ngày để tìm kiếm'
}
});
//$('#txtFDate').rules('add', {
// required: true,
// LimitTime: '#txtTDate',
// messages: {
// required: 'Bạn phải nhập/ chọn ngày để tìm kiếm'
// }
//});
if (!$('#frmReport').valid()) return;
$table.bootstrapTable('refresh');
});
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;
}
}
]
});
