Skip to content

Commit a524aa2

Browse files
committed
update doc
1 parent d04c26e commit a524aa2

File tree

1 file changed

+13
-13
lines changed

1 file changed

+13
-13
lines changed

README.md

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
# vue-datatables-net
2-
> Vue jQuery DataTable.net wrapper component
2+
> Vue jQuery DataTables.net wrapper component
33
4-
This library is a wrapper for [jQuery DataTable](https://datatables.net/). It's a tiny package that doesn't include anything, not even the datatables.net core library.
4+
This library is a Vue 2 wrapper for [jQuery DataTables](https://datatables.net/). It's a tiny wrapper that doesn't include anything, not even the datatables.net core library.
55

6-
The initial focus/design of this library is to use with ajax/server-side endpoint. Though, since it is a datatables.net wrapper, local data use/loading is simply:
6+
The initial focus/design is to use with ajax/server-side endpoint. Though, since it is just a wrapper, local data use/loading is simply:
77

88
```javascript
99
component.dataTable.clear().draw();
@@ -24,7 +24,9 @@ npm run build
2424
```
2525

2626
## Usage
27-
> You will require these to use with Bootstrap 4:
27+
This library default configuration and provide example for use with `bootstrap4` styling. Though, you can fully customize with any other jQuery DataTables supported theme.
28+
29+
> Example of required imports for Bootstrap 4:
2830
2931
```html
3032
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
@@ -46,7 +48,7 @@ import 'datatables.net-buttons/js/buttons.html5.js';
4648
import 'datatables.net-buttons/js/buttons.print.js';
4749
import 'datatables.net-responsive/js/dataTables.responsive.js';
4850
49-
// import any datatable extension as you would when using it raw
51+
// import any datatables.net extension as you would when using it raw
5052
import 'datatables.net-buttons-bs4'
5153
import 'datatables.net-responsive-bs4'
5254
import 'datatables.net-fixedheader-bs4'
@@ -68,7 +70,7 @@ import 'datatables.net-select-bs4/css/select.bootstrap4.min.css';
6870
Example App demonstrate how to pass in overrides for our [jQuery DataTable](https://datatables.net/manual/options) default options - https://github.com/niiknow/vue-datatables-net/blob/master/example/App.vue#L8
6971

7072
**NOTE:**
71-
The example App use free API endpoint from typicode [https://jsonplaceholder.typicode.com] so it's not jQuery DataTable.net queryable. As a result, we have to define a dataSrc wrapper like so:
73+
Our example use a free API endpoint from [typicode](https://jsonplaceholder.typicode.com), which is simply a JSON endpoint. As a result, we define a `dataSrc` wrapper like so:
7274
```
7375
ajax: {
7476
url: 'https://jsonplaceholder.typicode.com/users',
@@ -78,7 +80,7 @@ ajax: {
7880
}
7981
```
8082

81-
Here are some server-side ajax parser implementation:
83+
Here are some jQuery DataTables server-side compatible parsers:
8284
* PHP - https://github.com/lampjunkie/php-datatables
8385
* PHP Symphony - https://github.com/stwe/DatatablesBundle
8486
* PHP Laravel - https://github.com/yajra/laravel-datatables
@@ -87,9 +89,7 @@ Here are some server-side ajax parser implementation:
8789
* Rails - https://github.com/jbox-web/ajax-datatables-rails
8890

8991
## Documentation
90-
Since it's a wrapper, all/most features are provided by the [jQuery DataTable](https://datatables.net/manual/) library.
91-
92-
More documentations below.
92+
Since it's a wrapper, all/most features are provided by the [jQuery DataTables](https://datatables.net/manual/) library.
9393

9494
## Parameters
9595
Our component parameters:
@@ -137,7 +137,7 @@ props: {
137137
`fields` is an schema object that identify all datatables.net columns, example:
138138

139139
Example:
140-
```json
140+
```javascript
141141
fields: {
142142
_id: { label: "ID" },
143143
title: { label: "Title", searchable: true, sortable: true },
@@ -157,7 +157,7 @@ fields: {
157157
- `render` custom cell rendering function https://datatables.net/reference/option/columns.render
158158

159159
## Additional Headers
160-
Many server-side usage require CSRF and/or API token headers. Since options are completely exposed, simply use the native method per [jQuery DataTable example](https://editor.datatables.net/manual/security#Prevention)
160+
Many server-side usage require CSRF and/or API token headers. Since options are completely exposed, simply use the native method per [jQuery DataTables example](https://editor.datatables.net/manual/security#Prevention)
161161

162162
i.e, something like:
163163
```javascript
@@ -172,7 +172,7 @@ options: {
172172
}
173173
```
174174

175-
If you haven't already figured it out, ajax is basically the signature of [jQuery.ajax](http://api.jquery.com/jquery.ajax/) which is demonstrated here wrapped as [jQuery DataTable ajax pipeline](https://datatables.net/examples/server_side/pipeline.html)
175+
If you haven't already figured it out, ajax is basically the signature of [jQuery.ajax](http://api.jquery.com/jquery.ajax/) which is demonstrated here wrapped as [jQuery DataTables ajax pipeline](https://datatables.net/examples/server_side/pipeline.html)
176176

177177
## Row Action Buttons
178178
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:

0 commit comments

Comments
 (0)