Jquery Datatable 的样例

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
    }
});