社区项目发现的问题四 datatable的注意事项

菜鸟刚刚搜索了一下,到底应不应该学 jq,大部分回答都是不应该,主要是公司都开始去jq了,现在主要推荐学习react、vue、angular,但是菜鸟感觉datatable这个功能 vue 还不能完全替代,主要是 element-uivant 的表格功能都没有datatable的全面。

当然,菜鸟发现了一个组件库的table还挺全面的,这里给出地址:Vuetify table

datatable

这里菜鸟就不跑题了,反正现在demo用的是 datatable ,就先来粗略总结一下 datatable 常用的操作,今后用到会更快,然后就是今后菜鸟用vue重构项目的时候,也会重新再写一篇文章。

1、引入

菜鸟发现官网只能下载最新版,其它版本只能自己去搜索着下载,反正菜鸟没搜到,然后菜鸟就搜了一下datatable是否兼容以前的版本,然后果然还是没有(干得漂亮T~T),应该是直接使用最新版就行。

这里菜鸟奉上自己项目用到的版本(datatable 1.10.15):
链接:https://pan.baidu.com/s/1xvf2ULxoOxJ4yYsijZ8KRw
提取码:aaaa

在你的项目中使用 DataTables,只需要引入三个文件即可:jQuery库,一个DT的核心js文件和一个DT的css文件(这里css文件就不给了,官网最新版的css应该是兼容以前版本的),css文件引入不一样的效果也有点不同,可以自己看看css源码(可以都引入一次,找到自己喜欢的样式就行)。
在这里插入图片描述
这是全部样式,其中min就是把对应的 js 丑化后的代码!(没什么影响)

菜鸟想来想去、写来写去,最后发现直接看文档最好: 安装

2、基础 和 结合ajax

注意:

菜鸟这里用的是 h-ui框架,所以有很多引入都是自带的,样式也是h-ui写的,所以读者看不到菜鸟引入上面列举的css,读者着重看js部分就好, h-ui的官网 ,后面我会写一下h-ui有关的博客!

代码:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  
  <!--/meta 作为公共模版分离出去-->
  <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
  <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css" />
  <link rel="stylesheet" type="text/css" href="static/business/css/style.css" />
  <!--/meta 作为公共模版分离出去-->
  
  <title>车辆信息</title>
</head>
<body>
  <div class="wap-container">
    <h2
      style="width: 100%;height:8%;position: fixed;background:url(img/car_head.jpg);background-size: 100% 400%;background-position:0% 60%;">
    </h2>
    <article class="Hui-admin-content clearfix">
      <div class="panel mt-20">
        <div class="panel-body">
          <div class="clearfix mt-20">
            <table style="cursor: pointer;" class="table table-border table-bordered table-hover table-bg table-sort">
              <thead>
                <tr class="text-c">
                  <th>旧门牌</th>
                  <th>新门牌</th>
                  <th>姓名</th>
                  <th>网格</th>
                  <th>联系电话</th>
                  <th>电动车、摩托车等车辆(车牌号)</th>
                  <th>机动车(车主、联系电话、车牌号)</th>
                  <th>是否养犬、是否办理狗证</th>
                  <th>备注(是否存在乱堆乱放、是否油烟外溢)</th>
                </tr>
              </thead>
              <tbody>

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </article>
  </div>
  
  <!--_footer 作为公共模版分离出去-->
  <script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
  <script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
  <!--/_footer /作为公共模版分离出去-->

  <!--请在下方写此页面业务相关的脚本-->
  <script type="text/javascript" src="lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
  <script type="text/javascript" src="static/business/js/main.js"></script>

  <script type="text/javascript">
    $(function () {
      $('.table-sort').dataTable({
        "aaSorting": [[4, "desc"]], // 默认第几个排序,从0开始
        "bStateSave": true, // 状态保存。有默认需要排序的需求时,该属性最好不要,尽管会降低速度,但是:完成需求 >= 速度;如果有点击跳转,那么就需要该属性,不然别人跳转完回来又需要重新翻页过去(修改代码看效果的时候也记得把这个关了,不然不清除缓存一直都是先的界面)
        "pagingType": "full_numbers", // 要想显示首页和尾页这两个按钮,就必须加这个属性
        "aoColumnDefs": [
          { "orderable": false, "aTargets": [] } // 不参与排序的列
        ],
        
        // 这里写ajax
        ajax: {
          url: 'XXXXXXXXXx',
          type: "get",
          dataSrc: function (res) {
            return res;
          }
        },
        columns: [  // 要和返回的字段相对应
          {
            "data": "old_brand",
            "sClass": "text-c" // 为td添加这个class,自己定义这个class样式就行
          },
          {
            "data": "new_brand",
            "sClass": "text-c"
          },
          {
            "data": "name",
            "sClass": "text-c"
          },
          {
            "data": "grid",
            "sClass": "text-c"
          },
          {
            "data": "phone",
            "sClass": "text-c"
          },
          {
            "data": "electric_vehicle",
            "sClass": "text-c"
          },
          {
            "data": "vehicle",
            "sClass": "text-c"
          },
          {
            "data": "dog",
            "sClass": "text-c"
          },
          {
            "data": "remarks",
            "sClass": "text-c"
          },
        ],
      });
    });
  </script>
  <!--/请在上方写此页面业务相关的脚本-->
</body>
</html>

运行结果:
在这里插入图片描述

注意dataSrc

在这里插入图片描述
在这里插入图片描述
dataSrc 不仅可以返回 JSON数据 ,还能在里面执行一些方法,例如:在表格显示之前就可以预先加载的一些数据(当然一般看不出来很大的先后差别)
在这里插入图片描述

3、render函数

代码:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <link rel="Bookmark" href="favicon.ico">
  <link rel="Shortcut Icon" href="favicon.ico" />

  <!--_meta 作为公共模版分离出去-->
  <link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
  <link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css" />
  <link rel="stylesheet" type="text/css" href="static/business/css/style.css" />
  <!--/meta 作为公共模版分离出去-->

  <title>进出车辆信息</title>
</head>
<body>
  <div class="wap-container">
    <h2
      style="text-align: center;color: gold;font-weight: 800;width: 100%;height: 8%;position: fixed;background:url(img/car_head.jpg);background-size: 100% 400%;background-position: 0% 60%;">
    </h2>
    <article class="Hui-admin-content clearfix">
      <div class="panel mt-20">
        <div class="panel-body">
          <div class="clearfix mt-20">
            <table style="cursor: pointer;" class="table table-border table-bordered table-hover table-bg table-sort">
              <thead>
                <tr class="text-c">
                  <th>车牌</th>
                  <th>时间</th>
                  <th>出入</th>
                </tr>
              </thead>
              <tbody>

              </tbody>
            </table>
          </div>
        </div>
      </div>
    </article>
  </div>
  <!--_footer 作为公共模版分离出去-->
  <script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
  <script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
  <script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
  <!--/_footer /作为公共模版分离出去-->

  <!--请在下方写此页面业务相关的脚本-->
  <script type="text/javascript" src="lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
  <script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
  <script type="text/javascript" src="static/business/js/main.js"></script>

  <script type="text/javascript">
    $(function () {
      $('.table-sort').dataTable({
        "aaSorting": [[1, "desc"]],
        "pagingType": "full_numbers",
        
        // 这里写ajax
        ajax: {
          url: 'XXXXXXXXXXXX',
          type: "get",
          dataSrc: function (res) {
            return res;
          }
        },
        columns: [
          {
            "data": "car_number",
            "sClass": "text-c"
          },
          {
            "data": "car_time",
            "sClass": "text-c"
          },
          {
            "data": "inout",
            "render": function (data, type, row) {  //对数据进行处理,并返回(type\row都可以打印看看)
              return data == 1 ? "<font color=red>进场</font>" : "<font color=blue>出场</font>";
            },
            "sClass": "text-c"
          },
        ],
      });
    });
  </script>
  <!--/请在上方写此页面业务相关的脚本-->
</body>
</html>

运行结果:
在这里插入图片描述

4、取消第一行默认排序

这个是菜鸟在写这篇博客时,老师突然提出的需求,然后菜鸟发现:不管你用SQL查询数据时,是如何排序的,当数据传递给 DataTable 时,它会按照它自己的规则再进行一次排序,这个规则就是 "order"

官网(order):
在这里插入图片描述
那么如何才能取消呢?
在这里插入图片描述
当然,我这个是需求比较奇怪,必须是第一排不排序,其它排也不能默认排序(但是要可以排序),及数据库返回的是什么就用什么顺序。如果你可以使用其它行排列,那么也比较简单:
在这里插入图片描述

5、获取数据 和 添加事件

注意:

添加事件时,必须使用 DataTable 而不能写 dataTable
在这里插入图片描述

官网:
在这里插入图片描述
代码:

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="Bookmark" href="favicon.ico" >
	<link rel="Shortcut Icon" href="favicon.ico" />

    <!--_meta 作为公共模版分离出去-->
	<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="static/business/css/style.css" />
	<!--/meta 作为公共模版分离出去-->

	<title>美食街信息</title>
</head>
<body>
	<div id="pbw_app" class="wap-container">
		<h2 style="text-align: center;color: rgb(30,144,255);font-weight: 800;width: 100%;height: 8%;position: fixed;background: url(img/food_head.jpg);background-size: 50% 500%;background-position: 0 40%;">美食街信息</h2>
		<article class="Hui-admin-content clearfix">
			<div class="panel mt-20">
				<div class="panel-body">
					<div class="clearfix mt-20">
						<table style="cursor: pointer;" class="table table-border table-bordered table-hover table-bg table-sort">
							<thead>
								<tr class="text-c">
									<th>店铺名称</th>
									<th>类别</th>
									<th>面积</th>
									<th>从业人数</th>
									<th>店主姓名</th>
									<th>联系电话</th>
									<th>地址</th>
									<th>运营情况</th>
									<th>备注</th>
								</tr>
							</thead>
							<tbody>
								
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</article>
	</div>
	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
	<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
	<!--/_footer /作为公共模版分离出去-->

	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
	<script type="text/javascript" src="static/business/js/main.js"></script>

	<script>
		const food_introduction = new Map([
			["杏花早点", "舌间上的美味,你与我的滋味。"],
			["鸿兴早吃", "养生粥+公婆饼,开启健康每一天;手工无添加,美味先万家。"],
			["咸宁酒坊", "采用传统土曲发酵,无任何添加剂,自然清香,口感尚佳,后劲舒畅,绿色自然是吾辈一贯坚持的理念!"],
			["辰颐水果生鲜", "今天维C您吃了吗?新鲜水果,每日必不可少哟!"],
			["矿建牛肉黑粉", "口感浓郁,份量十足,回味无穷;老汤底料配上优质粉面,好吃不是吹的。"],
			["老面馒头", "纯手工现做现卖,好吃看的见;吃美食,听一个老兵的故事。"],
			["亮亮副食", "价优质好,欢迎常来。"],
			["矿建粮油店", "真情为民,服务至上。"],
			["煎饼传说", "酱香饼以香、甜、辣、脆为主要特点,香中有香,甜中带绵,辣而不燥,外脆里软,配上特制秘酱,一饼在手、唇指留香 !原味青菜馅饼皮薄馅大,物美价廉,馅饼有限(馅),回味无穷!铁山的美味煎饼尽在冶矿巷(煎饼传说)!"],
			["纯味饮品", "健康美味的早餐从纯味饮品开始。"],
			["第一家粉面馆", "是从1988年开始到现在已经有31年历史的老店,多年来坚持“品质为上、待客以诚”的经营理念。主打产品有牛肉黑粉,肥肠粉面,热干面等......一直精选用品质上好的米粉、牛肉、佐料,30多年的秘制配方吸引了大批顾客,铁山很多顾客都是在我们家从小吃到大的,不少顾客评价物美价廉,我们不开分店,精益求精。店址一直位于冶矿巷美食街,每到节假日排队的络绎不绝,现在应很多顾客要求,已经上线饿了么外卖,为大家提供更好的服务。"]
		]);

		$(function () {
			const table = $('.table-sort').DataTable({
				"order": [],
				"pagingType": "full_numbers",
				"aoColumnDefs": [
					{ "orderable": false, "aTargets": [] }
				],
				ajax: {
					url: 'XXXXXXXXXXXX',
					type: "get",
					dataSrc: function(res) {
						console.log(res);
						return res;
					}
				},
				columns: [
					{
						"data": "name",
						"render": function (data, type, row) {
							if (food_introduction.has(data)) {
							 	return `<font color="blue">${data}</font>`;
							}else{
								return data;
							}
						},
						"sClass": "text-c",
					},
					{
						"data": "type",
						"sClass": "text-c"
					},
					{
						"data": "area",
						"sClass": "text-c"
					},
					{
						"data": "number",
						"sClass": "text-c"
					},
					{
						"data": "leader_name",
						"sClass": "text-c"
					},
					{
						"data": "phone",
						"sClass": "text-c"
					},
					{
						"data": "address",
						"sClass": "text-c"
					},
					{
						"data": "status",
						"sClass": "text-c"
					},
					{
						"data": "remarks",
						"sClass": "text-c"
					}
				],
			});

			// 添加事件和获取数据
			$('.table-sort tbody').on('click', 'tr', function () {
				const idx = table.row(this).data().id;
				const namex = table.row(this).data().name;
				window.location.href = '../food_store_detail/food_store_detail.html?id='+idx+"&name="+namex;
			});
		});
	</script>
	<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>

6、修改每页显示的条数

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="Bookmark" href="favicon.ico" >
	<link rel="Shortcut Icon" href="favicon.ico" />

    <!--_meta 作为公共模版分离出去-->
	<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css" />
	<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.9/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="static/business/css/style.css" />
	<!--/meta 作为公共模版分离出去-->

	<title>美食街信息</title>
</head>

<body>
	<div id="pbw_app" class="wap-container">
		<h2 style="text-align: center;color: rgb(30,144,255);font-weight: 800;width: 100%;height: 8%;position: fixed;background: url(img/food_head.jpg);background-size: 50% 500%;background-position: 0 40%;">美食街信息</h2>
		<article class="Hui-admin-content clearfix">
			<div class="panel mt-20">
				<div class="panel-body">
					<div class="clearfix mt-20">
						<table style="cursor: pointer;" class="table table-border table-bordered table-hover table-bg table-sort">
							<thead>
								<tr class="text-c">
									<th>店铺名称</th>
									<th>类别</th>
									<th>面积</th>
									<th>从业人数</th>
									<th>店主姓名</th>
									<th>联系电话</th>
									<th>地址</th>
									<th>运营情况</th>
									<th>备注</th>
								</tr>
							</thead>
							<tbody>
								
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</article>
	</div>
	
	<!--_footer 作为公共模版分离出去-->
	<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
	<script type="text/javascript" src="lib/layer/3.1.1/layer.js"></script>
	<script type="text/javascript" src="static/h-ui/js/H-ui.min.js"></script>
	<!--/_footer /作为公共模版分离出去-->

	<!--请在下方写此页面业务相关的脚本-->
	<script type="text/javascript" src="lib/datatables/1.10.15/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src="lib/laypage/1.2/laypage.js"></script>
	<script type="text/javascript" src="static/business/js/main.js"></script>

	<script>
		const food_introduction=new Map([
			["思味缘饺子馆", "热爱早餐,热爱生活,几十年老店的思味缘饺子馆,是慕名前来美食街过早的人的不二选择。头天下午9名店员分工协作纯手工擀面皮、手工包饺子,次日老板亲自火候把握得当,方能煎至出两面金黄酥脆的炕饺,再配上独家榨菜爽脆可口,一碗浓浓的黑米粥,又是元气满满的一天。"],
			["杏花早点", "舌间上的美味,你与我的滋味。"],
			["鸿兴早吃", "养生粥+公婆饼,开启健康每一天;手工无添加,美味先万家。"],
			["咸宁酒坊", "采用传统土曲发酵,无任何添加剂,自然清香,口感尚佳,后劲舒畅,绿色自然是吾辈一贯坚持的理念!"],
			["辰颐水果生鲜", "今天维C您吃了吗?新鲜水果,每日必不可少哟!"],
			["矿建牛肉黑粉", "31年的老店,两代人的传承,孝感安陆夫妻俩凭借自家独特的美味,成为无数铁山人的回忆 。矿建牛肉黑粉和其他大部分的早餐店不同,这家店只有黑粉、黑面两种选择,食客们却络绎不绝。烫粉、煮面、淋酱、最后再撒上葱花,一碗黑粉/面就这样上桌了,粉面本身是基础,酱料是关键,牛肉更是灵魂。矿建黑粉不加调料、没有汤汁,纯靠一勺牛肉酱搭配一勺榨菜萝卜酱,捆住铁山人民的胃。酱料里的牛肉都是舒师傅自己卤制,片片入味又不失嚼劲,绝对是黑粉的灵魂搭档。矿建黑粉的魅力从入口那一刻起就让人惊艳!相比于其他粉面的口感不同,黑粉的酱料更加浓郁,满满的咸香,伴着米粉和牛肉,嗦到根本停不下来。"],
			["老面馒头", "纯手工现做现卖,好吃看的见;吃美食,听一个老兵的故事。"],
			["亮亮副食", "价优质好,欢迎常来。"],
			["矿建粮油店", "真情为民,服务至上。"],
			["煎饼传说", "酱香饼以香、甜、辣、脆为主要特点,香中有香,甜中带绵,辣而不燥,外脆里软,配上特制秘酱,一饼在手、唇指留香 !原味青菜馅饼皮薄馅大,物美价廉,馅饼有限(馅),回味无穷!铁山的美味煎饼尽在冶矿巷(煎饼传说)!"],
			["纯味饮品", "健康美味的早餐从纯味饮品开始。"],
			["第一家粉面馆", "是从1988年开始到现在已经有31年历史的老店,多年来坚持“品质为上、待客以诚”的经营理念。主打产品有牛肉黑粉,肥肠粉面,热干面等......一直精选用品质上好的米粉、牛肉、佐料,30多年的秘制配方吸引了大批顾客,铁山很多顾客都是在我们家从小吃到大的,不少顾客评价物美价廉,我们不开分店,精益求精。店址一直位于冶矿巷美食街,每到节假日排队的络绎不绝,现在应很多顾客要求,已经上线饿了么外卖,为大家提供更好的服务。"],
			["天天见面", "肥肠粉、牛肉面、杂酱面,洒上点香葱,再配上独家腌制的泡菜,还可再来一份酥脆焦黄的面窝,这就是每天排上长队也要来一口的天天见面,这也就是一日不见甚是想念的传说。"],
			["万里香麻辣烫", "因为抖音去打卡,那个烫土豆片儿,我吃了N串,味道美极了。铁山麻辣烫简称爱情麻辣烫人间美味,价格低廉,种类繁多,各种蔬菜,肉类混合在一起,加上又辣又麻的底料,简直不能更好吃,几乎每个星期都会去吃一次。鲜香美味,汤汁浓郁可口,入口回甘,简直太好喝了,菜品种类丰富,干净卫生,份量充足,价格公道,好听的这么多,选几个就是了。"]
		]);
		
		$(function () {
			const table = $('.table-sort').DataTable({
				"pageLength": 13,  // 每页显示条数(如果不在下拉选项中,则虽然分页显示的是最小的,但是一页的条数是这个)
				"lengthMenu": [13, 25, 50, 75, 100],  // 下拉选择的每页显示条数
				"order": [],
				"pagingType": "full_numbers",
				"aoColumnDefs": [
					{ "orderable": false, "aTargets": [] }// 不参与排序的列
				],
				ajax: {
					url: 'xxxxxxxxxxxxxxxxxxxxxxxxxx',
					type: "get",
					dataSrc: function(res) {
						console.log(res);
						return res;
					}
				},
				columns: [
					{
						"data": "name",
						"render": function (data, type, row) {
							if (food_introduction.has(data)) {
							 	return `<font color="blue">${data}</font>`;
							}else{
								return data;
							}
						},
						"sClass": "text-c",
					},
					{
						"data": "type",
						"sClass": "text-c"
					},
					{
						"data": "area",
						"sClass": "text-c"
					},
					{
						"data": "number",
						"sClass": "text-c"
					},
					{
						"data": "leader_name",
						"sClass": "text-c"
					},
					{
						"data": "phone",
						"sClass": "text-c"
					},
					{
						"data": "address",
						"sClass": "text-c"
					},
					{
						"data": "status",
						"sClass": "text-c"
					},
					{
						"data": "remarks",
						"sClass": "text-c"
					}
				],
			});

			$('.table-sort tbody').on('click', 'tr', function () {
				const idx = table.row(this).data().id;
				const namex = table.row(this).data().name;
				window.location.href = '../food_store_detail/food_store_detail.html?id='+idx+"&name="+namex;
			});
		});
	</script>
	<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>

运行结果:
在这里插入图片描述

7、多表格渲染

当许多表格共用一个 table 时,当你切换表格,一般会报错:
在这里插入图片描述
这里官网有解释:
datatable

大致的意思就是:DataTables 不允许在初始化时间以外的任何时间更改初始化选项,初始化后对表的任何操作都必须通过API完成。(菜鸟这里主要是因为重复渲染,当所选节点的 DataTable 实例已经初始化时,通过将选项传递给 DataTables 构造函数对象会触发此错误)

那么如何解决这个问题呢?

这里最简单的解决方案就是在初始化时加上一个 destroy 属性(官网上说:一般不推荐),代码如下:

let table2 = $('.table-sort2').DataTable({
	"destroy": true,
	"pagingType": "full_numbers",
	"aaSorting": [[0, "desc"]],//默认第几个排序
	ajax: {
		url: 'XXXXXXXXXXXXXXXXXXXXXXX',
		type: "post",
		dataType:"JSON",
		data:{imei:a},
		dataSrc: function (res) {
			return res;
		}
	},
	columns: [
		{
			"data": "time_begin",
			"sClass": "text-c",
			"width":"30%"
		},
		{
			"data": "heartrate",
			"sClass": "text-c",
			"width":"10%"
		},
		{
			"data": "address",
			"sClass": "text-c",
			"width": "60%"
		},
	],
});

8、更新表格

如果你不是想共用同一个 table ,仅仅只是想更新一下,那么建议使用

table.ajax.reload(null, false);  //table是 datatables 实例

在这里插入图片描述

9、 API

更多API见 (反正菜鸟感觉中文档API隐藏得找不着,找到了就分享出来 ) : API

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

PBitW

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值