DataTable——ajax获取到数据重加载

最新推荐文章于 2024-09-06 14:48:16 发布

冧_恣

最新推荐文章于 2024-09-06 14:48:16 发布

阅读量997

点赞数

分类专栏：前端文章标签： ajax 前端 javascript

本文链接：https://blog.csdn.net/weixin_43235307/article/details/121715029

版权

前端专栏收录该内容

9 篇文章 1 订阅

订阅专栏

这篇博客展示了如何使用jQuery的Ajax方法和Datatables插件动态地从服务器获取JSON数据，并将这些数据填充到HTML表格中。通过三种不同的方式配置Datatables，实现了数据的加载和展示，包括指定数据源属性和使用回调函数处理数据。内容涵盖了前端开发中的数据交互和表格渲染技术。

摘要由CSDN通过智能技术生成

1、前端html

<table id="carousel_figure_table" class="table table-striped table-bordered" style="width:100%">
	<thead>
		<tr>
			<th>ID</th>
			<th>名称</th>
			<th>编号</th>
			<th>原料</th>
			<th>生产日期</th>
			<th>保质期</th>
			<th>图片</th>
			<th>进价</th>
			<th>售价</th>
			<th>规格</th>
			<th>净容量</th>
			<th>操作</th>
		</tr>
	</thead>
	 <tbody>
        <!--datatable——自动生成表格数据 -->
	</tbody>
</table>

2、json数据内容

{
    "data": [
        {
            "product_id": 1,
            "product_name": "绿茶抽纸",
            "product_code": "V2223",
            "product_raw_material": "100%原生木浆",
            "product_pd": "2021-08-12",
            "product_exp": "三年",
            "product_pic": null,
            "product_purchase_price": 53,
            "product_sole_price": 60,
            "product_specification": "三层 133mmX195mm/张",
            "product_net_capacity": "120抽"
        },
        {
            "product_id": 2,
            "product_name": "绿茶抽纸",
            "product_code": "V2223",
            "product_raw_material": "100%原生木浆",
            "product_pd": "2021-08-12",
            "product_exp": "三年",
            "product_pic": null,
            "product_purchase_price": 53,
            "product_sole_price": 60,
            "product_specification": "三层 133mmX195mm/张",
            "product_net_capacity": "120抽"
        }
    ]
}

3、ajax调取数据

第一种写法：

$(document).ready(function () {
        var table = $('#carousel_figure_table').DataTable({
            ajax:{
                url:'/product/getProductData',
                dataSrc:'data' // 从数据源中的data属性去找数据数组
            },
            // 从json数据中获取对应列数据
            columns:[
                { "data": 'product_id' },
                { "data": 'product_name' },
                { "data": 'product_code' },
                { "data": 'product_raw_material' },
                { "data": 'product_pd' },
                { "data": 'product_exp' },
                { "data": 'product_pic' },
                { "data": 'product_purchase_price' },
                { "data": 'product_sole_price' },
                { "data": 'product_specification' },
                { "data": 'product_net_capacity' }
            ],
            // 是否允许用户改变表格每页显示的记录数
            lengthChange: false,
            iDisplayLength : 10,// 每页显示行数
            lengthMenu: [[10, 20, 40, 50, 100, -1], [10, 20, 40, 50, 100, "All"]],
            dom:'<ftlip>'
        });
});

第二种写法：

$(document).ready(function () {
        var table = $('#carousel_figure_table').DataTable({
            ajax:{
                url:'/product/getProductData',
                dataSrc:function (data) {
                    console.log(data)
                    //指定从json数据的data下找到数据数组
                    return data.data; 
                }
            },
            // 从json数据中获取对应列数据
            columns:[
                { "data": 'product_id' },
                { "data": 'product_name' },
                { "data": 'product_code' },
                { "data": 'product_raw_material' },
                { "data": 'product_pd' },
                { "data": 'product_exp' },
                { "data": 'product_pic' },
                { "data": 'product_purchase_price' },
                { "data": 'product_sole_price' },
                { "data": 'product_specification' },
                { "data": 'product_net_capacity' }
            ],
            // 是否允许用户改变表格每页显示的记录数
            lengthChange: false,
            iDisplayLength : 10,// 每页显示行数
            lengthMenu: [[10, 20, 40, 50, 100, -1], [10, 20, 40, 50, 100, "All"]],
            dom:'<ftlip>'
        });
});

第三种写法：

$(document).ready(function () {
        var table = $('#carousel_figure_table').DataTable({
            ajax:'/product/getProductData',
            // 从json数据中获取对应列数据
            columns:[
                { "data": 'product_id' },
                { "data": 'product_name' },
                { "data": 'product_code' },
                { "data": 'product_raw_material' },
                { "data": 'product_pd' },
                { "data": 'product_exp' },
                { "data": 'product_pic' },
                { "data": 'product_purchase_price' },
                { "data": 'product_sole_price' },
                { "data": 'product_specification' },
                { "data": 'product_net_capacity' }
            ],
            // 是否允许用户改变表格每页显示的记录数
            lengthChange: false,
            iDisplayLength : 10,// 每页显示行数
            lengthMenu: [[10, 20, 40, 50, 100, -1], [10, 20, 40, 50, 100, "All"]],
            dom:'<ftlip>'
    });
});

4、生成表格