2021-04-22

善良要历练的莲ya

已于 2022-12-10 11:48:23 修改

阅读量108

点赞数

分类专栏：学习笔记文章标签： javascript css3 html5 node.js css

于 2021-04-22 17:48:25 首次发布

本文链接：https://blog.csdn.net/weixin_46557195/article/details/116023825

版权

学习笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文详细介绍了在使用Datatable时遇到初始化错误的解决方法，重点讲解了如何通过设置'destroy': true'避免重复渲染，并分享了其他配置参数用法及Ajax请求处理技巧，确保前后端数据对接顺畅。

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

datatable相关问题处理

问题描述

1.当点击表格搜索按钮后,出现以下报错
在这里插入图片描述

原因

意思是说旧的表格已经初始化，重复初始化会报错

解决办法

加上参数 ‘destroy’:true, //不能重渲染
在这里插入图片描述
顺便加上一些其他参数的用法吧哈哈

		'paging': true,
		'iDisplayLength': 10,
		'lengthChange': false,  //是否显示改变显示条数
		"lengthMenu": [
			[5, 10, 15, 20], ["5条/页", "10条/页", "15条/页", "20条/页"]
		],
		'dom':'t<"bottom"lifp<"clear">>',
		'searching': false,
		'ordering': false,
		'info': true,    //是否显示总条数
		'autoWidth': false,
		"serverSide": true,
		'pagingType':'simple',   //不显示页数按钮
		"destroy":true,
		"language": {
			"paginate": {
				"next": ">",
				"previous": "<"
			}                               //分页样式改为箭头
		},

//# Ajax请求转换
//当请求的参数和后端返回的数据与datatable封装参数不一致，需要前台做转化

 ajax: function (data, callback, settings) {
      //封装请求参数
      let params = {};
      params.pageNum = data.start / data.length + 1;
      params.pageSize = data.length;
      params[field]=value;
      // return JSON.stringify(data);
      $.ajax({
        "url": "../../db/getDbRecordList",
        "type": "POST",
        "contentType": "application/json",
        "dataType": "json",
        "data": JSON.stringify(params),
        success: function (list) {
          let data = {};
          if(list.code == 20000){
             //处理参数
            data.data = (list.data.list == null) ? [] : list.data.list;
            data.recordsFiltered = list.data.size;
            data.recordsTotal = list.data.size;
            data.success = true;
          }
          callback(data);
        }
      })
    },
     "columns": [
     //展示列表操作
     ],
    "fnDrawCallback": function( settings, json ) {
     //回调操作
    }
  });