Skip to content

Instantly share code, notes, and snippets.

@wflanagan
Last active June 12, 2017 23:58
Show Gist options
  • Save wflanagan/3d03e615a6622209fd98d4025d87da72 to your computer and use it in GitHub Desktop.
Save wflanagan/3d03e615a6622209fd98d4025d87da72 to your computer and use it in GitHub Desktop.
What i'm trying to do.
window.App ||= {}
# This is what calls the KeywordsIndex class and initializes it.
class PageInit
constructor: ->
page = "#{$('body').data('page')}"
@execute_page_js(page)
execute_page_js: (page) ->
if "function" is typeof window[page]
klass = window[page]
new klass()
# Initializer that runs on a page
App.init = ->
new PageInit()
App.hacks = ->
# Handles making sure the modal is above fixed positioned elements on page
$('.modal').on 'show.bs.modal', (event)->
$(this).appendTo("body")
$(document).on "turbolinks:load", ->
App.init()
App.hacks()
window.App ||= {}
rows_selected = []
$.fn.dataTable.ext.buttons.reload =
text: 'Reload'
className: 'buttons-reload'
action: (e, dt, node, config) ->
dt.ajax.reload()
return
$.fn.dataTable.ext.buttons.add_tags =
text: 'Add Tags'
action: (e, dt, node, config) ->
alert dt.rows(selected: true).indexes().length + ' row(s) selected'
return
$.fn.dataTable.ext.buttons.deselect_all =
text: 'Clear Selection'
action: (e, dt, node, config) ->
console.log dt.table.columns().checkboxes.deselectAll()
console.log "Deselect called"
return
App.DataTables = {
init: (selector, opts) ->
$(selector).each ->
@tableOptions = $.extend({}, App.DataTables.defaultOptions(), opts)
@table = $(this).DataTable(@tableOptions)
@table.on 'draw', ->
updateDataTableSelectAllCtrl table
return
storekey: (selector) ->
"#{App.currentUser()}:#{App.currentProject()}:#{selector}"
defaultOptions: ->
{
ordering: true,
searching: true,
processing: true,
serverSide: true,
responsive: true,
stateSave: true,
language: {
processing: "<div class='sk-rotating-plane text-center'>"
},
dom: '<"row"<"col-md-6"f><"col-md-6"B>>rt<"row"<"col-md-3"l><"col-md-4"i><"col-md-5"p>>',
ajax: $(this).data('url'),
columnDefs: [
{
targets: 0,
orderable: false,
searchable: false,
width: '1%',
className: 'dt-body-center',
render: (data, type, full, meta) ->
'<input type="checkbox">'
}
],
select: {
style: 'os'
},
order: [[1,'asc']],
buttons: ['print', 'copy', 'reload', 'add_tags', 'deselect_all']
}
}
class @KeywordsIndex
constructor: ->
dataTable = App.DataTables.init("#keywords-table", columns: [
{ data: 'checkbox' },
{ data: 'name' },
{ data: 'created_at'}
])
1) ServerSide-based processing - when there are 100,000 rows I only want 10 at a time.
2) Multiple checkboxes (multi-select) with a checkbox and a highlight that indicates the row is selected.
3) Persist across refreshes - When I am on the first page, and i select a few rows, then go the second page,
and click a few rows, and I go back to the first page, it should still be selected. When I click an "action"
link to most likely a modal form, it should add the selected ids to the form for posting.
4) Abstract as much as possible into a standard datatable class, so I can reuse the code. We use a lot of tables,
I only wnat to maintain 1 class.
5) Use off the shelf code as much as possible. If it works "by default" that's the ideal solution.. I don't want to
manage and maintian that I can let others do it for me. :-)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment