vue-data-tables
Version:
A simple, customizable and pageable table, based on vue2 and element-ui.
214 lines (195 loc) • 9.8 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue-data-tables Document</title>
<meta name="description" content="Description">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" >
<link rel="stylesheet" href="//unpkg.com/element-ui/lib/theme-chalk/index.css">
<link rel="stylesheet" href="css/compatible.css">
<style>
.blog-corner {
position: fixed;
right: 0;
bottom: 0;
width: 0;
height: 0;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
border-right: 40px solid #606266;
border-bottom: 40px solid #606266;
z-index: 1;
}
</style>
</head>
<body>
<div id="app"></div>
<a class='blog-corner' target='_blank' href='//www.njleonzhang.com'>
<svg t="1537495824569" class="icon" style="" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4360" xmlns:xlink="http://www.w3.org/1999/xlink" width="30" height="30"><defs><style type="text/css"></style></defs><path d="M206.941091 615.959273c24.250182-20.922182 36.375273-48.290909 36.375273-82.082909 0-27.205818-8.005818-49.268364-23.970909-66.280728-15.988364-16.989091-37.306182-27.042909-63.930182-30.161454v-1.093818c21.317818-6.981818 38.027636-18.734545 50.152727-35.281455 12.125091-16.523636 18.176-35.979636 18.176-58.414545 0-26.810182-10.007273-48.570182-30.045091-65.303273S146.618182 252.276364 112.453818 252.276364H0.023273v395.101091h115.176727c36.910545-0.023273 67.490909-10.472727 91.741091-31.418182zM46.312727 294.144h53.178182c50.501818 0 75.752727 19.2 75.752727 57.576727 0 22.248727-7.261091 39.447273-21.76 51.665455s-34.443636 18.315636-59.787636 18.315636H46.312727v-127.557818z m0 169.169455h53.178182c63.534545 0 95.325091 23.342545 95.325091 69.98109 0 22.411636-7.493818 40.052364-22.458182 52.89891-14.987636 12.869818-36.049455 19.293091-63.232 19.29309H46.312727v-142.17309zM317.44 251.461818h45.172364v395.892364h-45.172364V251.461818zM674.373818 607.301818c25.437091-27.089455 38.167273-63.138909 38.167273-108.125091 0-45.940364-11.822545-81.850182-35.397818-107.729454-23.621818-25.902545-56.436364-38.842182-98.490182-38.842182-44.101818 0-79.080727 13.312-104.983273 39.959273s-38.842182 63.650909-38.842182 111.034181c0 43.52 12.427636 78.475636 37.329455 104.820364 24.878545 26.368 58.181818 39.540364 99.886545 39.540364 42.775273-0.023273 76.893091-13.568 102.330182-40.657455z m-193.28-105.402182c0-34.722909 8.448-61.952 25.344-81.687272 16.896-19.758545 39.842909-29.626182 68.887273-29.626182 29.207273 0 51.665455 9.565091 67.351273 28.648727 15.732364 19.106909 23.575273 46.289455 23.575272 81.547636 0 34.909091-7.842909 61.812364-23.575272 80.733091-15.685818 18.920727-38.144 28.392727-67.351273 28.392728-28.672 0-51.549091-9.634909-68.608-28.928-17.082182-19.293091-25.623273-45.637818-25.623273-79.080728z" fill="#fff" p-id="4361"></path><path d="M1025.512727 618.728727V359.191273h-45.172363v39.121454h-1.093819c-18.385455-30.487273-46.568727-45.730909-84.596363-45.730909-40.052364 0-71.586909 14.149818-94.626909 42.426182-23.063273 28.276364-34.583273 66.397091-34.583273 114.338909 0 42.24 10.705455 75.915636 32.093091 100.980364 21.410909 25.088 49.664 37.608727 84.736 37.608727 43.170909 0 75.496727-17.989818 97.000727-53.992727h1.093818v30.859636c0 28.928-5.329455 52.177455-16.011636 69.771636l-22.830545 24.157091-0.977455 0.674909c-7.144727 4.398545-57.716364 32.721455-130.117818-0.558545-78.219636-36.002909-189.533091-38.958545-216.948364 55.296l32.279273 24.855273s0-44.357818 49.989818-62.114909c37.143273-13.172364 77.568 3.467636 109.568 17.198545v0.186182c9.192727 4.654545 18.920727 8.494545 29.207273 11.496727l0.488727 0.162909a225.047273 225.047273 0 0 0 61.765818 8.215273c99.141818 0 148.736-51.828364 148.736-155.415273z m-69.003636-35.816727c-15.918545 17.989818-36.514909 26.996364-61.858909 26.996364-24.971636 0-45.056-9.402182-60.206546-28.253091-15.150545-18.827636-22.737455-43.938909-22.737454-75.357091 0-36.538182 7.889455-64.954182 23.691636-85.248s37.655273-30.464 65.582546-30.464c22.597818 0 41.448727 7.982545 56.622545 23.970909 15.150545 15.988364 22.737455 35.165091 22.737455 57.576727v41.611637c0 28.090182-7.959273 51.153455-23.831273 69.166545z" fill="#fff" p-id="4362"></path></svg>
</a>
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="//unpkg.com/docsify-demo-box-vue/dist/docsify-demo-box-vue.min.js"></script>
<script src="//unpkg.com/docsify-edit-on-github/index.js"></script>
<script src="//unpkg.com/element-ui/lib/index.js"></script>
<script src="//unpkg.com/element-ui/lib/umd/locale/en.js"></script>
<script src="//unpkg.com/vue-data-tables@3.4.5/dist/data-tables.min.js"></script>
<script src="//unpkg.com/json2csv@3.9.1/dist/json2csv.js"></script>
<script src="//unpkg.com/docsify-plugin-codefund/index.js"></script>
<script>
Vue.use(DataTables)
ELEMENT.locale(ELEMENT.lang.en)
var data, titles;
var id = 0;
var define =
`data = [{
"content": "Water flood",
"flow_no": "FW201601010001",
"flow_type": "Repair",
"flow_type_code": "repair",
}, {
"content": "Lock broken",
"flow_no": "FW201601010002",
"flow_type": "Repair",
"flow_type_code": "repair",
}, {
"content": "Help to buy some drinks",
"flow_no": "FW201601010003",
"flow_type": "Help",
"flow_type_code": "help"
}];
titles = [{
prop: "flow_no",
label: "NO."
}, {
prop: "content",
label: "Content"
}, {
prop: "flow_type",
label: "Type"
}]`
var fakeHttp =
`
// fake server
let serverData = []
for (let i = 0; i < 1000; i++) {
serverData.push({
'content': 'Lock broken' + i,
'flow_no': 'FW20160101000' + i,
'flow_type': i % 2 === 0 ? 'Repair' : 'Help',
'flow_type_code': i % 2 === 0 ? 'repair' : 'help',
})
}
let mockServer = function(res) {
let datas = serverData.slice()
let allKeys = Object.keys(data[0])
// do filter
res && res.filters && res.filters.forEach(filter => {
datas = datas.filter(data => {
let props = (filter.search_prop && [].concat(filter.search_prop)) || allKeys
return props.some(prop => {
if (!filter.value || filter.value.length === 0) {
return true
}
return [].concat(filter.value).some(val => {
return data[prop].toString().toLowerCase().indexOf(val.toLowerCase()) > -1
})
})
})
})
// do sort
if (res.sort && res.sort.order) {
let order = res.sort.order
let prop = res.sort.prop
let isDescending = order === 'descending'
datas.sort(function(a, b) {
if (a[prop] > b[prop]) {
return 1
} else if (a[prop] < b[prop]) {
return -1
} else {
return 0
}
})
if (isDescending) {
datas.reverse()
}
}
return {
data: datas.slice((res.page - 1) * res.pageSize, res.page * res.pageSize),
req: res,
ts: new Date(),
total: datas.length
}
}
let i = 1
// fake http
function http(res, time = 200) {
return new Promise((resolve, reject) => {
setTimeout(_ => {
var data = mockServer(res)
console.log('fake server return data: ', data)
resolve(data)
}, time)
})
}`
eval(define)
eval(fakeHttp)
var jsResources = '<scr' + 'ipt src="//unpkg.com/vue/dist/vue.js"></scr' + 'ipt>'
+ '\n<scr' + `ipt src="//unpkg.com/element-ui/lib/index.js"></scr` + 'ipt>'
+ '\n<scr' + `ipt src="//unpkg.com/element-ui/lib/umd/locale/en.js"></scr` + 'ipt>'
+ '\n<scr' + `ipt src="//unpkg.com/vue-data-tables@3.4.5/dist/data-tables.min.js"></scr` + 'ipt>'
var cssResources = '@import url("//unpkg.com/element-ui/lib/theme-chalk/index.css");'
var bootCode =
'ELEMENT.locale(ELEMENT.lang.en)\n'
+ 'Vue.use(DataTables.DataTables)\n'
+ 'Vue.use(DataTables.DataTablesServer)\n'
+ 'var data, titles\n\n' + define + '\n'
+ fakeHttp + '\n\n';
window.$docsify = {
coverpage: [
'/',
'/en-us/',
'/zh-cn/'
],
name: 'vue-data-tables',
repo: 'https://github.com/njleonzhang/vue-data-tables',
subMaxLevel: 2,
loadSidebar: true,
loadNavbar: true,
search: 'auto', // default,
plugins: [
DemoBoxVue.create(jsResources, cssResources, bootCode),
EditOnGithubPlugin.create(
'https://github.com/njleonzhang/vue-data-tables/blob/master/docs/'
),
function (hook) {
var footer = [
'<hr/>',
'<footer>',
'<span><a href="https://github.com/njleonzhang">leon zhang</a> ©2017.</span>',
'<span>Proudly published with <a href="https://github.com/QingWei-Li/docsify" target="_blank">docsify</a>.</span>',
'</footer>'
].join('')
hook.afterEach(function (html) {
return html + footer
})
},
DocsifyCodefund.create(15)
]
}
</script>
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/external-script.min.js"></script>
<script src="//unpkg.com/docsify/lib/plugins/search.min.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-110377374-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-110377374-1');
</script>
</body>
</html>