Vue和jquery.dataTable结合的实例
何麻雀
公司表格渲染用的jqueryTable，然而我想用vue做数据绑定，通过jqueryTable做css样式。所以有了下边的故事…
首先说一下思路，发送ajax请求后台数据（数据格式是List的json串），我的目的就是写一个模板，这个模板可以根据json自动的绘制table并进行渲染。当然了大佬们都不建议jquery和vue一起用，所以…这篇文章很low
首先附上完成代码，具体请看注释
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="./js/vue.js" type="text/javascript" charset="utf-8"></script>
<title></title>
</head>
<body>
<div id="vueTable">
<table>
<thead is="dis-thead" :title="title"></thead>
<tbody>
<tr is="dis-content" :subject="subject" v-for="(subject,index) in subjects" :key="index"></tr>
</tbody>
</table>
</div>
<script type="text/javascript">
//尝试用vue组件技术动态生成表格
//表头
Vue.component('dis-thead',{
template:'<thead><tr><th><input type="checkbox" name="selectedId" id="selectedId" onClick="selectAll(checked)" /></th><th v-for="i in title" :key="i" οnclick="changeColor(this)">{{i}}</th><tr></thead>',
props:['title']
});
//表格体
Vue.component('dis-content',{
template:'<tr><td v-for="(value,name,index) in subject" :key="index"><template v-if="name===\'id\'"><input name="deleteIds" οnclick="IsSelectAll()" type="checkbox" :id="value"></template><template v-else>{{value}}</template></td></tr>',
props:['subject']
});
var vueTable=new Vue({
el:'#vueTable',
data:{
subjects:[
{id:1,ip:"192.168.53.1",mac:"6e:3c:4n:8e:6a:ff",interface:"1"},
{id:2,ip:"192.168.53.9",mac:"6e:3c:4n:8e:6a:ff",interface:"2"},
{id:3,ip:"192.168.53.31",mac:"6e:3c:4n:8e:6a:ff",interface:"3"},
{id:4,ip:"192.168.53.55",mac:"6e:3c:4n:8e:6a:ff",interface:"4"},
{id:5,ip:"192.168.53.61",mac:"6e:3c:4n:8e:6a:ff",interface:"5"},
{id:6,ip:"192.168.53.59",mac:"6e:3c:4n:8e:6a:ff",interface:"6"}
]
},
computed:{
title:function(){
var a=[];
if(this.subjects.length!=0){
var objects=this.subjects[0];
a= Object.keys(objects) ;
a.shift();
}
return a;
},
}
})
</script>
</body>
</html>
在vue组件中我给标签加了一些响应函数，这些函数无关紧要，我就不写在这了。
代码解析和注意事项：
- 一个vue组件dis-thead是表头
- 一个vue组件dis-content是表格主体
- subjects属性代表的是后台传过来的json串
- title是根据subjects提取的属性名称集合（用的时候建议自己写一个数组把，因为如果你的数据为空，那么…你就没有表头了，这很尴尬）
- 关于vue的对象数组赋值问题，方法很多，我是这么干的vueTable.subjects = Object.assign([], [], data.queryList);
data.queryList就是后台传过来的东西。
数据绑定到这就搞定了！！！
JqueryDataTable的页面渲染部分
这个问题我只是搞定了，但是…我感觉不是最优解，如果有大佬请多多指教，
demo的实验我是在原jquery页面改造的。
所以vue代码我写在了$(function(){....})块中，我也不知道它叫啥姑且叫jquery加载块。
问题来了ajax页面加载函数和$('#table_id').DataTable的渲染函数（这个函数是jqueryDataTable插件的函数，如果你不懂请另行百度）放在一个jquery加载块里加载异常。解决方案是：
拆开一个$(function(){....})块做ajax请求数据绑定，一个$(function(){…})`块搞jqueryTable数据渲染，大概是这个样子，因为刚碰vue没找到该用啥来替代这个jquery加载块，所以请各路大神指教！
类似资料：