Jquery Datatable 的样例
$('#sample_1').dataTable({
"bPaginate": true, //是否显示分页器
"bInfo": true, //是否显示表格的一些信息
"bFilter": true, //是否启用客户端过滤器
"sDom": "<>lfrtip<>",
"bDeferRender": false,
"bJQueryUI": false, //是否启用JQueryUI风格
"bLengthChange": true, //是否显示每页大小的下拉框
"bProcessing": true,
"bScrollInfinite": false,
"bSort": true, //是否启用各列具有按列排序的功能
"bSortClasses": true,
"aaSorting": [[0, "asc"]],
"aLengthMenu": [5, 10, 20],
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "对不起,查询不到任何相关数据",
"sInfo": "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
"sInfoEmtpy": "找不到相关数据",
"sProcessing": "正在获取数据,请稍后...",
"sSearch": "搜索:",
"oPaginate": { "sFirst": "第一页", "sPrevious": "上一页 ", "sNext": "下一页 ", "sLast": "末页 " }
}
});
如果动态的修改了table的内容,那时如果翻页或者改页面大小,会发现内容又变回去了,需要先执行
$("#sample_1").dataTable().fnDestroy();
然后执行
$('#sample_1').dataTable(参数);
验证的设置
$.validator.setDefaults({
// contain the error msg in a small tag
errorElement : "span", //错误框的标签类型,默认为label
errorClass : 'help-block',//错误框的class(默认为error,这里用bootstrap.min.css的bootstrap的help-block,)
errorPlacement : function(error, element) {
// render error placement for each input type
if (element.attr("type") == "radio" || element.attr("type") == "checkbox") {// for chosen elements, need to insert the error after the chosen container
error.insertAfter($(element).closest('.form-group').children('div').children().last());
} else if (element.attr("name") == "card_expiry_mm" || element.attr("name") == "card_expiry_yyyy") {
error.appendTo($(element).closest('.form-group').children('div'));
} else {
error.insertAfter(element);
// for other inputs, just perform default behavior
}
},
ignore : ':hidden',
success : function(label, element) {
label.addClass('help-block valid');
// mark the current input as valid and display OK icon
$(element).closest('.form-group').removeClass('has-error');
},
highlight : function(element) {
$(element).closest('.help-block').removeClass('valid');
// display OK icon
$(element).closest('.form-group').addClass('has-error');
// add the Bootstrap error class to the control group
},
unhighlight : function(element) {// revert the change done by hightlight
$(element).closest('.form-group').removeClass('has-error');
// set error class to the control group
}
});