前台几个功能使用的框架说明

1、表格使用jquery.dataTables.min.js

HTML代码中只有一个<div>，

table的代码全写在js脚本中，结构大概如下：

function createTable(...) {
$('#demo').html( '<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>' );

$('#example').dataTable({
'iDisplayLength': 10,    //分页每页行数
'bSortClasses': false,
'bSort': false,
'sPaginationType': 'full_numbers',
"sDom": '<"top"i>rtp<"clear">',
'oLanguage': {
'sProcessing': '加载数据中...',
'sInfo': '当前显示  _START_ 到  _END_ 条记录，总共  _TOTAL_ 条',
'sInfoEmpty': '',
'oPaginate': {'sFirst': '首页', 'sPrevious': '上一页', 'sNext': '下一页', 'sLast': '末页'},
"sEmptyTable": ""
},
'aoColumns': [
{ 'sTitle': '流水号', 'sClass': 'cg tl width70'}, // 列名和样式

],
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': '/wallet/listTransferRecord.html',  //请求地址
'fnServerData': function ( sSource, aoData, fnCallback ) {
aoData.push({name: 'startTime', value: $('#startTime').val()}); //请求的data

$.ajax(sSource, aoData, function(data){

var result = data.data.paginationView;
var aaData = [];
aaData.push();
fnCallback({
'sEcho': result.sEcho, 
'iTotalRecords': result.itotalRecords, 
'iTotalDisplayRecords': result.itotalDisplayRecords, 
'aaData': aaData
});
});
}
});

}

不用自己写分页代码，还不错。

2、日期选择

jquery.ui.datepicker.min.js和jquery.ui.datepicker-zh-CN.js

如下：

$.datepicker.setDefaults($.datepicker.regional['zh-CN']);
var dates = $('#startTime, #endTime').datepicker({
dateFormat: 'yy-mm-dd',
onSelect: function(selectedDate) {
var option = this.id == "startTime" ? "minDate" : "maxDate";
var instance = $(this).data("datepicker");
var date = $.datepicker.parseDate(instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
dates.not(this).datepicker("option", option, date);
}
});

使用jquery ui框架，会增加下载js文件的流量消耗，根据性能和开发时间来取舍。

3、数值百分号展示

var reg=/(-?\d+)(\d{3})/;

循环变量

while(decimalStr.test(reg)){

decimalStr.replace(reg, "$1,$2);

}

难点是$1,$2，查资料知道是第一个括号、第二个括号，这样两部分中间就加了一个,。