datatables加载表格数据入门

 function loadTrafficData(){$('#trafficData').DataTable({searching : false,ordering : false,autoWidth : false,paging:false,language : {info:'',infoEmpty:'',emptyTable:'没有数据',},//用ajax向后台请求数据ajax : {url : "${ctx}/orderSale/getTrafficList?saleId=${orderSale.id}",dataSrc : function(json){console.log(json);return json;},dataType : 'json',type : "post",},columns : [ { data : 'traffic.trafficNo', "defaultContent" : "" }, { data : 'distribute.distributionNo', "defaultContent" : "" }, { data : 'traffic.vehicle.vehicleNo', "defaultContent" : "" }, //row代表某一行数据，即从后台返回的一个实体{ data : 'members.memberName',render:function(data,type,row){if(row.traffic.members){var members = row.traffic.members;var content = "";for(var i=0;i<members.length;i++){content += members[i].name;content += "|";}return content.substring(0,content.length-1);}else{return "";}}}, { data : 'startCityEndCity',render:function(data,type,row){var origin="暂无";var destination="暂无";//如果不写外面的if判断，里面的if如果originProvinces为空，会报错（不能够读取属性）if(row.distribute.originProvinces){if(row.distribute.originProvinces.nodeName){origin = row.distribute.originProvinces.nodeName;}}if(row.distribute.destinationProvinces){            if(row.distribute.destinationProvinces.nodeName){destination = row.distribute.destinationProvinces.nodeName;}}return origin+"-->"+destination;}}, { data : 'distribute.startDate', "defaultContent" : "" }, { data : 'distribute.endDate', "defaultContent" : "" },{ data : 'distribute.totalDate',render:function(data,type,row){if(row.distribute.endDate){return data;}else{return '配送中';}}} ],});}

附加表格

<div id="trafficTableContiner"><table class="display" id="trafficData"><thead><tr role="row" class="heading"><th>行车单编号</th><th>配送单编号</th><th>车辆</th><th>人员</th><th>始发地-目的地</th><th>开始时间</th><th>结束时间</th><th>总耗时(H)</th></tr></thead><tbody></tbody></table></div>

datatables加载表格数据入门相关推荐

自制预防校园暴力的智能监控系统：远程加载表格数据，SQLAlchemy操作数据库，云服务器（CentOS)
本文是[小码哥李明杰老师]指导完成的山东大学引航计划公益人工智能科研实训项目. 自制预防校园暴力的智能监控系统重定向路径路由配置(访问根路径,直接重定向到main): export default ...
Go 用JSON加载表格数据
支持热重载reload,但会有一些问题,下面注释有写 package tableimport ("runtime/debug" )//IntArray int类型数组 type I ...
关于加载表格及模态框数据回填的Bug
关于加载表格及模态框数据回填的Bug ----------------------------------------- 开发工具与关键技术:Visual Studio 2015 C# 作者:林敏静 ...
在Spring Boot中加载初始化数据
文章目录依赖条件 data.sql文件 schema.sql 文件 @sql注解 @SqlConfig 注解在Spring Boot中加载初始化数据在Spring Boot中,Spring Bo ...
ceisum 加载geojson,使用 Cesium 动态加载 GeoJSON 数据
前言需求是这样的,我需要在地图中显示 08 年到现在的地震情况,地震都是发生在具体的时间点的,那么问题就来了,如何实现地震情况按照时间动态渲染而不是一次全部加载出来. 一. 方案分析这里面牵扯到两 ...
静态网页轻松加载动态数据，让HTML开发更轻松
很多人可能用过Vie.js,网页动态加载数据.一般来说,HTML在后面调用new Vue()加载数据的. Vue很有创意,在HTML中插入{{}}标记,使用HTML模板化,方便开发.但其也有一定不便. ...
element ui 树形-懒加载-表格-多选勾选问题
element ui树形表格如下: 它的数据格式为:使用children字段来存放子级数据 tableData: [{id: 1,date: "2016-05-02",name: ...
Layui获取ID，点击加载表格
怎么点击表格中的一条数据,加载另一张表格. 这里用tab1和tab2为例. 1.首先写上监听事件 //监听行单击事件(双击事件为:rowDouble)layuiTable.on('row(tab1)' ...
autoware加载地图数据与使用rosbag包建图（三）
autoware加载地图数据(三) 介绍如何为autoware加载地图数据启动autoware $ cd ~/autoware.ai $ source install/setup.bash $ ro ...
Naigos PNP图无法加载最新数据
Naigos PNP图无法加载最新数据前几天IDC断电,设备全部重启,导致nagios pnp图无法正常加载,经过排查发下如下几点状况: 1,查看log日志,并没有报错. 2,npcd没有正常运行, ...

datatables加载表格数据入门

datatables加载表格数据入门相关推荐

最新文章

热门文章