DataTable异步加载数据并刷新

喜欢ヅ旅行 2022-12-22 00:52 160阅读 0赞

在工作中遇到这样的情况，使用DataTable填充数据（场景不相同）：

![在这里插入图片描述][20201117112007482.jpeg_pic_center]  
  
    假设id、姓名、性别信息做一次查询就可以得到，而成绩需要根据id去分别查询（甚至需要去请求网络接口获取数据），消耗的时间就会非常多，在即时性要求比较高的项目中甚至都是不可接受的。

我的解决方法是DataTable先加载基本信息（id、姓名、性别），完成后再异步去加载其余数据。

后台接口:

@RequestMapping("/student/basicInfo")
    public Map<String, List<StudentVO>> getStudentsBasicInfo(@RequestParam("classID") Long classID) {  // 获取基本信息（快）
    	// List<StudentVO> studentVOList = ...
    	result.put("data", studentVOList);
    	return result;
    }

@RequestMapping("/student/moreInfo")
    public Map<String, List<StudentVO>> getStudentsMoreInfo(@RequestParam("classID") Long clusterID) {  // 获取其余信息（慢）
    	// List<StudentVO> studentVOList = ...
    	result.put("data", brokerMetricsVOS);
    	return result;
    }

前端html：

<table id="table-studentInfo" class="display">
    	<thead>
    		<tr>
    			<th>id</th>
    			<th>name</th>
    			<th>sex</th>
    			<th>Chinese</th>
    			<th>math</th>
    			<th>english</th>
    		</tr>
    	</thead>
    	<tbody>
    	</tbody>
    </table>

前端js：

function renderStudentsTable() { 
        studentsTable = $('#table-student').DataTable({ 
            ajax: { 
                url: "/student/basicInfo",
                type: "POST",
                data: { 
                    classID: 123xxx
                }
            },
            dataSrc: "data",
            columns: [
                {  data: "id" },
                {  data: "name" },
                {  data: "sex" },
                {  data: "Chinese" },
                {  data: "math" },
                {  data: "english" }
            ],
            fnInitComplete: function () {  // 当DataTable加载完成会回调fnInitComplete方法
                $.ajax({ 
                    url: "/student/moreInfo",
                    dataType: "json",
                    type: "POST",
                    data: { 
                        classID: 123xxx
                    },
                    success: function (result) { 
                        let data = result.data;
    
                        studentsTable.rows().every( function () { 
                            let d = this.data();
                            for (let i = 0; i < data.length; ++i) { 
                                if (d.id === data[i].id) { 
                                   d.Chinese = data[i].Chinese;
                                   d.math = data[i].math;
                                   d.english = data[i].english;
                                }
                            }
    
                            this.invalidate(); // 将DataTable对这一行的缓存无效
                        });
    
                        studentsTable.draw(); // 重新绘制DataTable
                    }
                });
            }
        });
    }

这次就到这里了，希望能对大家有帮助。

[20201117112007482.jpeg_pic_center]: /images/20221120/d16461a9c6664b3ab87b180c0dd70368.png

发表评论取消回复

表情：

评论列表（有 0 条评论，160人围观）

还没有评论，来说两句吧...

相关阅读

相关 DataTable异步加载数据并刷新

在工作中遇到这样的情况，使用DataTable填充数据（场景不相同）： ![在这里插入图片描述][20201117112007482.jpeg_pic_center]

喜欢ヅ旅行/ 2022年12月22日 00:52/ 0 赞/ 161 阅读

相关 jQuery异步加载数据并添加事件示例

当时项目是通过树形栏进行权限控制的，管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作，可是用$(".XX").click();方法是不行的。 1、之前用的是jq1.

朴灿烈づ我的快乐病毒、/ 2022年09月24日 13:24/ 0 赞/ 168 阅读

相关 ztree异步加载数据

ztree官网：[http://www.treejs.cn/v3/demo.php\\_101][http_www.treejs.cn_v3_demo.php_101] 1.

快来打我*/ 2022年07月15日 14:18/ 0 赞/ 222 阅读

相关 datatables加载表格数据入门

function loadTrafficData(){ $('trafficData').DataTable({

你的名字/ 2022年07月13日 13:17/ 0 赞/ 220 阅读

相关 Datatables 加载数据异步二次加载渲染表格及initComplete

一、我们在使用dataTables进行数据统计时，不可避免的会碰到对数据的统计。当进行服务器端数据读取时，，进行二次加载，渲染入数据。之前我采用的是重新发起dat

矫情吗；*/ 2022年07月13日 11:09/ 0 赞/ 405 阅读

相关 jquery dataTable 后台加载数据并分页

使用 dataTable后台加载数据并分页。网上版本很多，但很多都是不能用或者不详细的，这里是已经验证过的。引用 js文件 <scr

深藏阁楼爱情的钟/ 2022年07月13日 06:45/ 0 赞/ 237 阅读

相关 DataTables如何重新加载数据

DataTables加载数据 // 调用ajax请求数据 g.ajax("/srp/data", data, function (jsonStr) {

你的名字/ 2022年04月25日 02:36/ 0 赞/ 1013 阅读

相关 DataTables如何重新加载数据

DataTables加载数据 // 调用ajax请求数据 g.ajax("/srp/data", data, function (jsonStr) {

朴灿烈づ我的快乐病毒、/ 2022年01月09日 07:03/ 0 赞/ 485 阅读

相关 dataTable定时刷新数据

![70][] <div class="col-lg-12 col-md-12 col-xs-12"> <div

偏执的太偏执、/ 2021年10月08日 06:26/ 0 赞/ 588 阅读

相关 datatables组件加载数据

使用jquery的datatables插件渲染表格组件时，最佳的方法如下：全局定义dataTables对象变量；页面加载时初始化dataTables对象；

朴灿烈づ我的快乐病毒、/ 2021年06月24日 16:09/ 0 赞/ 433 阅读