1
- # Important
2
1
3
- The current gem is released without updated plugins. If you encounter any errors, please fork the repository, update the plugin files and send a pull-request.
4
2
5
3
# jquery-datatables-rails
4
+ [ ![ Gem Version] ( https://badge.fury.io/rb/jquery-datatables-rails.svg )] ( http://badge.fury.io/rb/jquery-datatables-rails )
6
5
7
6
This gem packages the jQuery [ DataTables] ( http://datatables.net/ ) plugin for easy use with the Rails 3.1+ asset pipleine.
8
-
9
7
It provides all the basic DataTables files, and a few of the extras.
10
8
9
+ # Important
10
+
11
+ ** The current gem is released without updated plugins.**
12
+ ** Take care of using the gem from master repository, there are general changes. [ CHANGELOG.md] ( CHANGELOG.md ) **
13
+
14
+ If you encounter any errors, please fork the repository, update the plugin files and send a pull-request.
15
+
11
16
## General Installation
12
17
13
- 1 . Add to your Gemfile:
18
+ ** This is README is valid only for 2.1.10.0.1 version **
14
19
15
- gem 'jquery-datatables-rails', '~> 2.1.10.0.0'
20
+ 1 - Add to your Gemfile:
16
21
17
- 1 . Install the gem:
22
+ ``` ruby
23
+ gem ' jquery-datatables-rails' , ' ~> 2.1.10.0.1'
24
+ ```
18
25
19
- bundle install
26
+ 2 - Install the gem:
20
27
21
- 1 . Add the JavaScript to ` application.js ` :
28
+ ``` bash
29
+ bundle install
30
+ ```
22
31
23
- //= require dataTables/jquery.dataTables
32
+ 3 - Add the JavaScript to ` application.js ` :
24
33
25
- 1 . Add the stylesheets to ` application.css ` :
34
+ ``` javascript
35
+ // = require dataTables/jquery.dataTables
36
+ ```
26
37
27
- *= require dataTables/jquery.dataTables
38
+ 4 - Add the stylesheets to ` application.css ` :
39
+
40
+ ``` css
41
+ * = require dataTables/jquery.dataTables
42
+ ```
28
43
29
44
## Twitter Bootstrap 2 Installation
30
45
31
- 1 . Complete steps 1-3 of the General Installation
32
- 1 . Add some more JavaScript to ` application.js ` :
46
+ 1 - Complete steps 1-3 of the General Installation
47
+ 2 - Add some more JavaScript to `application.js`:
33
48
34
- //= require dataTables/jquery.dataTables.bootstrap
49
+ ```javascript
50
+ //= require dataTables/bootstrap/2/jquery.dataTables.bootstrap
51
+ ```
35
52
36
- 1 . Add this (and only this) stylesheet to ` application.css ` :
53
+ 3 - Add this (and only this) stylesheet to `application.css`:
37
54
38
- *= require dataTables/jquery.dataTables.bootstrap
55
+ ```css
56
+ * = require dataTables/bootstrap/2/jquery.dataTables.bootstrap
57
+ ```
39
58
40
- 1 . Initialize your datatables using one of these options:
59
+ 4 - Initialize your datatables using one of these options:
41
60
42
61
```javascript
43
62
// For fluid containers
44
63
$('.datatable' ).dataTable( {
45
64
"sDom ": " <'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>" ,
46
65
" sPaginationType" : " bootstrap"
47
66
});
48
- ```
49
- ``` javascript
67
+
50
68
// For fixed width containers
51
69
$('.datatable' ).dataTable( {
52
70
"sDom ": " <'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>" ,
53
71
" sPaginationType" : " bootstrap"
54
72
});
55
73
```
56
74
57
-
58
75
## Twitter Bootstrap 3 Installation
59
76
60
- 1 . Complete steps 1-3 of the General Installation
61
- 1 . Add some more JavaScript to ` application.js ` :
77
+ 1 - Complete steps 1-3 of the General Installation
78
+ 2 - Add some more JavaScript to ` application.js ` :
62
79
63
- //= require dataTables/jquery.dataTables.bootstrap3
80
+ ``` javascript
81
+ // = require dataTables/bootstrap/3/jquery.dataTables.bootstrap
82
+ ```
64
83
65
- 1 . Add this (and only this) stylesheet to ` application.css ` :
84
+ 3 - Add this (and only this) stylesheet to ` application.css ` :
66
85
67
- *= require dataTables/jquery.dataTables.bootstrap3
86
+ ``` css
87
+ * = require dataTables/bootstrap/3jquery.dataTables.bootstrap3
88
+ ```
68
89
69
- 1 . Initialize your datatables using these option:
90
+ 4 - Initialize your datatables using these option :
70
91
71
92
```javascript
72
93
$('.datatable' ).dataTable( {
@@ -77,17 +98,21 @@ $('.datatable').dataTable({
77
98
78
99
## Zurb Foundation Installation
79
100
80
- 1 . Complete steps 1-3 of the General Installation
101
+ 1 - Complete steps 1-3 of the General Installation
81
102
82
- 1 . Add some more JavaScript to ` application.js ` :
103
+ 2 - Add some more JavaScript to ` application.js ` :
83
104
84
- //= require dataTables/jquery.dataTables.foundation
105
+ ``` javascript
106
+ // = require dataTables/jquery.dataTables.foundation
107
+ ```
85
108
86
- 1 . Add this (and only this) stylesheet to ` application.css ` :
109
+ 3 - Add this (and only this) stylesheet to ` application.css ` :
87
110
88
- *= require dataTables/jquery.dataTables.foundation
111
+ ``` css
112
+ * = require dataTables/jquery.dataTables.foundation
113
+ ```
89
114
90
- 1 . Initialize your datatables using these option:
115
+ 4 - Initialize your datatables using these option :
91
116
92
117
```javascript
93
118
$('.datatable' ).dataTable( {
@@ -97,50 +122,54 @@ $('.datatable').dataTable({
97
122
98
123
## Responsive Installation
99
124
100
- 1 . Complete steps 1-3 of the General Installation
101
- 1 . Add the lodash gem to your application:
125
+ 1 - Complete steps 1-3 of the General Installation
126
+ 2 - Add the lodash gem to your application:
102
127
103
- ```
104
- gem 'lodash-rails'
105
- ```
128
+ ``` ruby
129
+ gem ' lodash-rails'
130
+ ```
106
131
107
- 1. Add some more JavaScript to `application.js`:
132
+ 3 - Add some more JavaScript to ` application.js ` :
108
133
109
- //= require dataTables/jquery.dataTables.bootstrap3
110
- //= require dataTables/jquery.dataTables.responsive
134
+ ``` javascript
135
+ // = require dataTables/bootstrap/3/jquery.dataTables.bootstrap
136
+ // = require dataTables/extras/dataTables.responsive
137
+ ```
111
138
112
- 1. Add this (and only this) stylesheet to `application.css`:
139
+ 4 - Add this (and only this) stylesheet to ` application.css ` :
113
140
114
- *= require dataTables/jquery.dataTables.bootstrap3
115
- *= require dataTables/jquery.dataTables.responsive
141
+ ``` css
142
+ * = require dataTables/bootstrap/3/jquery.dataTables.bootstrap
143
+ * = require dataTables/extras/dataTables.responsive
144
+ ```
116
145
117
- 1. Initialize your datatables using:
146
+ 5 - Initialize your datatables using:
118
147
119
148
```coffeescript
120
- responsiveHelper = undefined
121
- breakpointDefinition =
122
- tablet: 1024
123
- phone: 480
124
-
125
- tableContainer = $('.datatable' )
126
- tableContainer .dataTable
127
-
128
- sPaginationType: "bootstrap"
129
- # Setup for responsive datatables helper.
130
- bAutoWidth: false
131
- bStateSave: false
132
-
133
- fnPreDrawCallback: ->
134
- responsiveHelper = new ResponsiveDatatablesHelper(tableContainer, breakpointDefinition) unless responsiveHelper
135
-
136
- fnRowCallback: (nRow, aData, iDisplayIndex, iDisplayIndexFull) ->
137
- responsiveHelper.createExpandIcon nRow
138
-
139
- fnDrawCallback: (oSettings) ->
140
- responsiveHelper.respond()
149
+ responsiveHelper = undefined
150
+ breakpointDefinition =
151
+ tablet: 1024
152
+ phone: 480
153
+
154
+ tableElement = $(" #example" )
155
+ tableElement .dataTable
156
+ autoWidth: false
157
+ preDrawCallback: - >
158
+
159
+ # Initialize the responsive datatables helper once.
160
+ responsiveHelper = new ResponsiveDatatablesHelper(tableElement, breakpointDefinition) unless responsiveHelper
161
+ return
162
+
163
+ rowCallback: (nRow) - >
164
+ responsiveHelper .createExpandIcon nRow
165
+ return
166
+
167
+ drawCallback: (oSettings) - >
168
+ responsiveHelper.respond()
169
+ return
141
170
```
142
171
143
- 1 . To use see the author of responsive files and follow the instructions as described on [ datatables-responsive]
172
+ 6 - To use see the author of responsive files and follow the instructions as described on [datatables-responsive ]
144
173
145
174
## Plugins
146
175
@@ -160,7 +189,7 @@ These files can be found in the [assets directory][assets].
160
189
161
190
## Extras
162
191
163
- Only the official extras are available:
192
+ Official extras are available:
164
193
165
194
* AutoFill
166
195
* ColReorder
@@ -171,26 +200,38 @@ Only the official extras are available:
171
200
* Scroller
172
201
* TableTools
173
202
174
- To add an extra into your application, add its JS file to ` application.js ` using the following pattern:
203
+ Unofficial extra is available:
204
+ * Responsive
175
205
176
- //= require dataTables/extras/[ExtraName]
206
+ ### How to use Extras
207
+ 1 - To add an extra into your application, add its JS file to `application.js` using the following pattern :
208
+
209
+ ```javascript
210
+ //= require dataTables/extras/[ExtraName ]
211
+ ```
177
212
178
- Additionally, you may need to add any associated CSS files. For instance the TableTools extra requires
213
+ 2 - Additionally, you may need to add any associated CSS files. For instance the TableTools extra requires
179
214
you to add the following two lines to your `application.css` file:
180
215
181
- *= require dataTables/extras/dataTables.tableTools
182
- *= require dataTables/extras/TableTools_JUI
216
+ ```css
217
+ * = require dataTables/extras/dataTables.tableTools
218
+ * = require dataTables/extras/TableTools_JUI
219
+ ```
183
220
184
- TableTools also requires this to be included in 'application.js':
221
+ 3 - TableTools also requires this to be included in 'application.js':
185
222
186
- //= require dataTables/extras/ZeroClipboard.js
223
+ ```javascript
224
+ //= require dataTables/extras/ZeroClipboard.js
225
+ ```
187
226
188
227
Make sure to also add it's initialization as described on [datatables extras' site][datatables_extras]
189
228
190
- ## Articles
229
+ ## Articles and Extras
191
230
192
231
[RailsCast #340 DataTables ] Apr 11, 2012.
193
232
233
+ [ajax-datatables-rails ] a wrapper around datatable's ajax methods that allow synchronization with server-side
234
+
194
235
## Thanks
195
236
196
237
Thanks to Comanche for responsive support files [datatables-responsive ]
@@ -199,3 +240,4 @@ Thanks to Comanche for responsive support files [datatables-responsive]
199
240
[datatables_extras ]: http://datatables.net/extras/
200
241
[datatables-responsive ]: https://github.com/Comanche/datatables-responsive
201
242
[RailsCast #340 DataTables ]: http://railscasts.com/episodes/340-datatables
243
+ [ajax-datatables-rails ]: https://github.com/antillas21/ajax-datatables-rails
0 commit comments