Skip to content

Commit 853d898

Browse files
author
Joel Quenneville
committed
finished basic documentation
1 parent d9f52d4 commit 853d898

File tree

1 file changed

+47
-2
lines changed

1 file changed

+47
-2
lines changed

README.md

Lines changed: 47 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,9 @@ def initialize(view)
3434
end
3535
```
3636

37-
For `@columns`, assign an array of the database columns that correspond to the columns in our view table. For example `[users.f_name, users.l_name, users.bio]`. This array is used for sorting by various columns
37+
* For `@columns`, assign an array of the database columns that correspond to the columns in our view table. For example `[users.f_name, users.l_name, users.bio]`. This array is used for sorting by various columns
3838

39-
For `@searchable_columns`, assign an array of the database columns that you want searchable by datatables. For example `[users.f_name, users.l_name]`
39+
* For `@searchable_columns`, assign an array of the database columns that you want searchable by datatables. For example `[users.f_name, users.l_name]`
4040

4141
This gives us:
4242
```ruby
@@ -88,6 +88,51 @@ def get_raw_records
8888
end
8989
```
9090

91+
### Controller
92+
Set up the controller to respond to JSON
93+
94+
```ruby
95+
def index
96+
respond_to do |format|
97+
format.html
98+
format.json { render json: UsersDatatable.new(view_context) }
99+
end
100+
end
101+
```
102+
103+
### View
104+
* Set up an html `<table>` with a `<thead>` and `<tbody>`
105+
* Add in your table headers if desired
106+
* Don't add any rows to the body of the table, datatables does this automatically
107+
* Add a data attribute to the `<table>` tag with the url of the JSON feed
108+
109+
The resulting view may look like this:
110+
111+
```erb
112+
<table id="user-table", data-source="<%= users_path(format: :json) %>">
113+
<thead>
114+
<tr>
115+
<th>First Name</th>
116+
<th>Last Name</th>
117+
<th>Brief Bio</th>
118+
</tr>
119+
</thead>
120+
<tbody>
121+
</tbody>
122+
</table>
123+
```
124+
125+
### Javascript
126+
Finally, the javascript to tie this all together. In the appropriate `js.coffee` file:
127+
128+
```coffeescript
129+
$ ->
130+
$('#users-table').dataTable
131+
bProcessing: true
132+
bServerSide: true
133+
sAjaxSource: $('#users-table').data('source')
134+
```
135+
91136
## Contributing
92137

93138
1. Fork it

0 commit comments

Comments
 (0)