vue组件用jquery_Vue jQuery DataTables.net包装器组件
vue组件用jquery
vue-datatables-net (vue-datatables-net)
This library is a Vue 2 wrapper for jQuery DataTables. It's a tiny wrapper that doesn't include anything, not even the datatables.net core library.
该库是jQuery DataTables的Vue 2包装器。 这是一个很小的包装程序，不包含任何内容，甚至不包含datatables.net核心库。
发展历程 (Development)
laravel-mix is use to simplify build and packaging.
laravel-mix用于简化构建和包装。
Requirement: Install NodeJS, NPM
要求：安装NodeJS，NPM
Then:
然后：
git clone https://github.com/niiknow/vue-datatables-net
cd vue-datatables-net
npm installor in one command:
或在一个命令中：
npm install git+https://github.com/niiknow/vue-datatables-net.gitTo run locally (automatically launch firefox):
要在本地运行(自动启动firefox)：
npm run watchTo build library for npm publish:
要为npm发布构建库：
npm run buildThis library is available on NPM, to install:
该库可在NPM上安装：
npm install vue-datatables-net用法 (Usage)
This library default configuration and provide example for bootstrap4 styling. Though, it allow for complete flexibility of customization with any other jQuery DataTables supported theme.
该库的默认配置，并提供bootstrap4样式的示例。 但是，它允许使用任何其他jQuery DataTables支持的主题进行自定义的完全灵活性。
Example of imports for Bootstrap 4:
Bootstrap 4的导入示例：
See example App
查看范例应用程式
Example App demonstrate how to pass overrides for our jQuery DataTable default options - https://github.com/niiknow/vue-datatables-net/blob/master/example/app.vue
示例应用程序演示了如何传递jQuery DataTable默认选项的替代-https : //github.com/niiknow/vue-datatables-net/blob/master/example/app.vue
NOTE: Our example use a free API endpoint from typicode, which is simply a JSON endpoint. As a result, we needed to define a dataSrc wrapper like so:
注意：我们的示例使用来自typicode的免费API端点，它只是一个JSON端点。 结果，我们需要像这样定义一个dataSrc包装器：
ajax: {
url: 'https://jsonplaceholder.typicode.com/users',
dataSrc: (json) => {
return json
}
}Of course, for your implementation, simply use a server-side compatible parser. Below are some jQuery DataTables server-side parsers:
当然，对于您的实现，只需使用服务器端兼容的解析器。 以下是一些jQuery DataTables服务器端解析器：
PHP - https://github.com/lampjunkie/php-datatables
PHP- https://github.com/lampjunkie/php-datatables
PHP Symphony - https://github.com/stwe/DatatablesBundle
PHP Symphony- https://github.com/stwe/DatatablesBundle
PHP Laravel - https://github.com/yajra/laravel-datatables
PHP Laravel- https://github.com/yajra/laravel-datatables
dotNET - https://github.com/ALMMa/datatables.aspnet, https://github.com/garvincasimir/csharp-datatables-parser
dotNET- https : //github.com/ALMMa/datatables.aspnet，https : //github.com/garvincasimir/csharp-datatables-parser
NodeJS - https://github.com/jpravetz/node-datatable
NodeJS- https://github.com/jpravetz/node-datatable
Rails - https://github.com/jbox-web/ajax-datatables-rails
Rails- https://github.com/jbox-web/ajax-datatables-rails
Python - https://github.com/Pegase745/sqlalchemy-datatables
Python- https://github.com/Pegase745/sqlalchemy-datatables
文献资料 (Documentation)
Since it's a wrapper, all/most features are provided by the jQuery DataTables library.
由于它是包装器，因此所有/大多数功能都由jQuery DataTables库提供。
参量 (Parameters)
Our component parameters:
我们的组件参数：
props: {
/**
* The table id - useful for saveState
*
* @type String
*/
id: {
type: String
},
/**
* Set the container classes.
*
* @type String
*/
containerClassName: {
type: String,
default: 'table-responsive d-print-inline'
},
/**
* Set the table classes you wish to use, default with bootstrap4
* but you can override with: themeforest, foundation, etc..
*
* @type String
*/
className: {
type: String,
default: 'table table-striped table-bordered nowrap w-100'
},
/**
* the options object: https://datatables.net/manual/options
*
* @type Object
*/
opts: {
type: Object
},
/**
* List all fields to be converted to opts columns
*
* @type Object
*/
fields: {
type: Object
},
/**
* Pass in DataTables.Net jQuery to resolve any conflict from
* multiple jQuery loaded in the browser
*
* @type Object
*/
jquery: {
type: Object
},
/**
* Pass in Vue to resolve any conflict from multiple loaded
*
* @type Object
*/
vue: {
type: Object
},
/**
* The select-checkbox column index (start at 1)
* Current implementation require datatables.net-select
*
* @type Number
*/
selectCheckbox: {
type: Number
},
/**
* Provide custom local data loading. Warning: this option has not been
* thoroughly tested. Please use ajax and serverSide instead.
*
* @type Function
*/
dataLoader: {
type: Function
},
/**
* true to hide the footer of the table
*
* @type Boolean
*/
hideFooter: {
type: Boolean
},
/**
* The details column configuration of master/details.
*
* @type {Object}
*/
details: {
type: Object
}
}fields is an schema object that identify all datatables.net columns, example:
fields是一个架构对象，它标识所有datatables.net列，例如：
Example:
例：
fields: {
_id: { label: "ID" },
title: { label: "Title", searchable: true, sortable: true },
type: { label: "Type" }
}字段属性 (Field properties)
labelTitle for displaylabel显示标题searchabletrue to enable search of fieldsearchabletrue以启用字段搜索sortablefalse to disable sortingsortable为false表示禁用排序nameto override the namename以覆盖名称datadifferentiate server-side sorting field - optional default tonamedata区分服务器端排序字段-name可选默认值visiblefalse to hidevisible错误隐藏widthto provide custom widthwidth，以提供定制的宽度classNameset column class namesclassName设置列的类名defaultContentprovide default html when no data available当没有可用数据时，
defaultContent提供默认htmlrendercustom cell rendering function https://datatables.net/reference/option/columns.renderrender自定义单元格渲染功能https://datatables.net/reference/option/columns.rendertemplatesimple vue template for the field. See example App.template该字段的简单vue模板。 请参阅示例应用程序。defaultOrdernull, asc/desc - the default/initial sort orderdefaultOrdernull，asc / desc-默认/初始排序顺序isLocalsame as setting both searchable and sortable to falseisLocal与将searchable和sortable都设置为false相同indexallow for column positioningindex允许列定位
It is important to understand why it is better to use
fieldsand notopts.columns. Though,fieldsis optional if one wish to use the rawopts.columnsdefinition.了解为什么使用
fields而不是opts.columns更好的原因很重要。 但是，如果希望使用原始的opts.columns定义，则fields是可选的。
One Purpose of this component is to extend jQuery DataTables function and features, example:
该组件的一个Purpose是扩展jQuery DataTables的功能和特性，例如：
Simplification of features configuration, such as
select-checkboxcolumn, customactionbuttons, and/or future Vue specific features.简化功能配置，例如
select-checkbox列，自定义action按钮和/或将来的Vue特定功能。Allow for customizable table heading on a per-column basis; thereby, not having to define all html for each column header.
允许按列自定义表格标题； 因此，不必为每个列标题定义所有html。
Ability to have simple
templatefield so you can pass schema JSON from static file or some API, instead of requiring to define a javascriptrenderfunction. Though, therenderfunction would provide best performance.具有简单
template字段的能力，因此您可以从静态文件或某些API传递模式JSON，而无需定义javascriptrender函数。 但是，render功能将提供最佳性能。Having schema also allow for future features, such as editable column/cell.
具有架构还允许将来的功能，例如可编辑的列/单元格。
大事记 (events)
Custom events for this component.
此组件的自定义事件。
doSomethingImmediatelyAfterTableCreatedAndInitialized(vdtnet) {
// use vdtnet.dataTable to access the jQuery DataTables object, example:
vdtnet.dataTable.on( 'order.dt', function () { eventFired( 'Order' ); } )
}table-creatingthis is right before jQuery(el).DataTable(component.options) is called allowing you to modify component options.table-creating是在调用jQuery(el).DataTable(component.options)之前，您可以修改组件选项。table-createdthis is after we called jQuery(el).DataTable and initialized all the columns.table-created这是在我们调用jQuery(el).DataTable并初始化所有列之后。reloadedthis is after data has been load/reloadedreloaded是在加载/重新加载数据之后
附加标题 (Additional Headers)
Many server-side usage require CSRF and/or API token headers. Since jQuery DataTables options are completely exposed as opts, simply use the native method per jQuery DataTables example
许多服务器端用法需要CSRF和/或API令牌标头。 由于jQuery DataTables options完全作为opts公开，因此每个jQuery DataTables示例只需使用本机方法
i.e, something like:
即，类似：
opts: {
'ajax': {
'url': url,
'type': 'GET',
'beforeSend': function (request) {
request.setRequestHeader("token", token);
}
}
}
// or as headers parameter
opts: {
'ajax': {
'url': url,
'type': 'GET',
'headers': {
'CSRFToken': TOKEN
}
}
}
// or as query parameter
opts: {
'ajax': {
'url': url,
'type': 'GET',
'data': function ( d ) {
d.CSRFToken = TOKEN;
}
}
}If you haven't already guessed, ajax is basically the signature of jQuery.ajax, which can be seen in this jQuery DataTables ajax pipeline code demonstration.
如果您还没有猜到，那么ajax基本上就是jQuery.ajax的签名，可以在此jQuery DataTables ajax管道代码演示中看到。
行动作按钮 (Row Action Buttons)
Use data-action attribute to automatically wire up any action button/elements. To render action button/element in a row, simply define dummy field like so:
使用data-action属性可以自动连接任何操作按钮/元素。 要连续渲染动作按钮/元素，只需定义虚拟字段，如下所示：
actions: {
label: 'Actions',
defaultContent: ' Edit' +
' Delete'
}重载方法和重载事件 (Reload method and reloaded event)
Allow you to refresh ajax content after some event. Let say you have something like this:
允许您在某些事件后刷新ajax内容。 假设您有这样的事情：