vue-data-tables
Version:
A simple, customizable and pageable table, based on vue2 and element-ui.
108 lines (98 loc) • 3.59 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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">
</head>
<body>
<div id="app"></div>
</body>
<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@1.0.4/dist/docsify-demo-box-vue.min.js"></script>
<script src="//unpkg.com/docsify-edit-on-github@1.0.1/index.js"></script>
<script src="//unpkg.com/element-ui@1.4.8/lib/index.js"></script>
<script src="//unpkg.com/element-ui@1.4.8/lib/umd/locale/en.js"></script>
<script src="//unpkg.com/vue-data-tables@2.1.0/dist/data-tables.min.js"></script>
<script src="//unpkg.com/json2csv@3.9.1/dist/json2csv.js"></script>
<script>
Vue.use(DataTables)
Vue.use(DataTables.DataTablesServer)
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 es5define = Babel.transform(define, { presets: ['es2015'] }).code
eval(es5define)
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.0.0/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)\n'
+ 'Vue.use(DataTables.DataTablesServer)\n'
+ 'var data, titles\n\n' + define + '\n\n';
window.$docsify = {
coverpage: true,
name: 'vue-data-tables',
repo: 'https://github.com/njleonzhang/vue-data-tables',
subMaxLevel: 2,
loadSidebar: true,
codesponsor: '6wgBExPbXl2BoBHsqL14Sg',
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
})
}
]
}
</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/codesponsor.min.js"></script>
</html>