Vanilla-DataTables

A lightweight, dependency-free javascript HTML table plugin

Github星跟蹤圖

Vanilla-DataTables

Build Status npm version license Average time to resolve an issue Percentage of issues still open


Due to time constraints this repo is no longer maintained. Please use the official fork over at fiduswriter/Simple-DataTables


A lightweight, extendable, dependency-free javascript HTML table plugin. Similar to jQuery DataTables, but without the dependencies.

Features

  • Sortable columns
  • Pagination
  • Searchable
  • Customisable layout
  • Customisable labels
  • Customise column rendering
  • Load data via AJAX requests
  • Export to common formats like csv, txt json, and sql
  • Import csv and json data
  • Control column visibility
  • Reorder or swap columns
  • moment.js integration for sorting columns with datetime strings
  • Extentable with custom plugins See the wiki (v1.6.0 and above)

Documentation, Latest Version


Demos


Install

Bower

bower install vanilla-datatables --save

npm

npm install vanilla-datatables --save

Browser

Grab the files from one of the CDNs and include them in your page:

<link href="https://unpkg.com/vanilla-datatables@latest/dist/vanilla-dataTables.min.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/vanilla-datatables@latest/dist/vanilla-dataTables.min.js" type="text/javascript"></script>

//or

<link href="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.css" rel="stylesheet" type="text/css">
<script src="https://cdn.jsdelivr.net/npm/vanilla-datatables@latest/dist/vanilla-dataTables.min.js" type="text/javascript"></script>

You can replace latest with the required release number.

CDNs courtesy of unpkg and jsDelivr


Quick Start

Then just initialise the plugin by either passing a reference to the table or a CSS3 selector string as the first parameter:

var myTable = document.querySelector("#myTable");
var dataTable = new DataTable(myTable);

// or

var dataTable = new DataTable("#myTable");

You can also pass the options object as the second paramater:

var dataTable = new DataTable("#myTable", {
	searchable: false,
	fixedHeight: true,
	...
});

Don't forget to check the wiki out for further help.


If this project helps you then you can grab me a coffee or beer to say thanks.

paypal


Copyright © 2017 Karl Saunders, MIT license

主要指標

概覽
名稱與所有者Mobius1/Vanilla-DataTables
主編程語言JavaScript
編程語言CSS (語言數: 3)
平台
許可證MIT License
所有者活动
創建於2016-04-19 14:44:20
推送於2020-12-27 20:02:34
最后一次提交2018-09-25 08:04:26
發布數66
最新版本名稱1.6.13 (發布於 )
第一版名稱0.1.0 (發布於 )
用户参与
星數372
關注者數14
派生數78
提交數379
已啟用問題?
問題數0
打開的問題數0
拉請求數8
打開的拉請求數7
關閉的拉請求數2
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?