datatables服务器加载数据，多语言

最新推荐文章于 2018-09-07 13:46:00 发布

原创最新推荐文章于 2018-09-07 13:46:00 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

Java Web 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用jQuery和DataTables插件初始化一个表格，并详细解释了配置参数的意义及使用方法，包括分页、搜索、排序等功能的开启与关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/**
 * 初始化datatables
 */
function initTable() {
	var table = $('#userTable');


    table.dataTable({
    	"language" : {
    		"lengthMenu": "每页 _MENU_ 条记录",
    		"processing": "正在加载数据...",
    		"info": "第 _START_ 到第 _END_ 条数据，总共有 _TOTAL_ 条记录",
     	    "infoEmpty" : "没有数据",
     	    "infoFiltered" : "（从 _MAX_ 条数据中过滤得到）",


    		"paginate": {  
    	        "first":      "第一页",  
    	        "last":       "最后一页",  
    	        "next":       "下一页",  
    	        "previous":   "上一页",    	        
    	    },  
    	},
    	"paginationType": "full_numbers", 
    	"info" : true,
		"lengthMenu": [ 5, 10, 15, 20, 25 ],
		"ordering" : false,					//	不排序
		"processing" : true,				//加载数据时显示正在加载信息 						
		"filter": false,                       //不使用过滤功能 
		"searching": false,
		
		"serverSide" : true,	
		"ajax" : {
			"url" : "user/getUserPage.action",
			"type" : "POST",
		},
		"columnDefs" : [
            {
            	"targets" : 0,
            	"data" : "id",
            	"render" : function(data, type, row, meta) {
            		var html = '<input type="checkbox" class="checkboxes" userId="' + data + '"/>';
            		return html;
            	}
            },
			{
				"targets" : 1,
				"data" : "userName",
			},
			{
				"targets" : 2,
				"data" : "password",
			},
		],
		"fnDrawCallback" : function() {
			//重绘checkbox,定义在airfish.js中
			reDrawCheckBox();
		}
    });


    var tableWrapper = jQuery('#userTable_wrapper');


    table.find('.group-checkable').change(function () {
        var set = jQuery(this).attr("data-set");
        var checked = jQuery(this).is(":checked");
        jQuery(set).each(function () {
            if (checked) {
                $(this).attr("checked", true);
            } else {
                $(this).attr("checked", false);
            }
        });
        jQuery.uniform.update(set);
    });


    tableWrapper.find('.dataTables_length select').select2(); // initialize select2 dropdown
}

前台jsp利用了Metronic框架，首行为checkbox控件，由于异步加载生成的checkbox需要调用metronic的初始化函数来修改样式，所以利用fnDrawCallback回调函数来完成。刚开始，利用fnInfoCallback回调函数，这会导致datatables左下角info信息无法显示的问题。