DataTables表格后台取数据

最新推荐文章于 2022-01-03 16:49:47 发布

原创最新推荐文章于 2022-01-03 16:49:47 发布 · 589 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#后端 #javascript #ViewUI

技术相关专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何利用jQuery DataTable插件实现数据表格的自适应宽度、排序、分页等功能，并详细展示了配置项及Ajax数据加载的具体实现方式。

<script type="text/javascript" language="javascript" class="init">
	$(document).ready(function() {
		$('#extable').dataTable({
			"bAutoWidth": false, //自适应宽度
			"aaSorting": [[0, "asc"]],
			"lengthMenu": [10, 20, 30],
			"pagingType": "full_numbers",
			 "language": {
			"processing": "正在加载中......",
            "lengthMenu": "每页显示 _MENU_ 条记录",
            "zeroRecords": "对不起，查询不到相关数据！",
            "info": "显示 page _PAGE_ of _PAGES_",//当前显示 _START_ 到 _END_ 条，共 _TOTAL_ 条记录
            "infoEmpty": "没找到数据",
            "infoFiltered": "(filtered from _MAX_ total records)",
            "search": "搜索",
            "paginate": {
                        "sFirst": "首页",
                        "sPrevious": "上一页",
                        "sNext": "下一页",
                        "sLast": "末页"
                    }
        	},
			"processing": true,
			"ajax": {
				"url": "http://localhost:8081/irpuser/api/v1/community/2/person",
				"data": function (data) {
					return data;
				}
			},
			"columns": [
			{ "data": "personId" },
            { "data": "personName" },
            { "data": "personType" },
            { "data": "innerCode" }
        	]
			/**
        	"serverSide": true,
			"ajax": {
            "url": "http://localhost:8081/irpuser/api/v1/community/2/person",
            "data": function ( d ) {
            	alert(d);
                d.myKey = "myValue";
                // d.custom = $('#myInput').val();
                // etc
            	}
        	}
        	*/
		});
	} );
	</script>