Skip to content

Instantly share code, notes, and snippets.

@vshjxyz
Last active February 28, 2019 06:23
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save vshjxyz/4351808 to your computer and use it in GitHub Desktop.
Save vshjxyz/4351808 to your computer and use it in GitHub Desktop.
This is a simple example of a working datatable using tastypie. I also Implemented the fnServerData so the datatable can paginate, search (via a query parameter configured in tastypie in the apply_filter method of the OrderResource), and sort columns using custom logics via the order_by parameter of tastypie.
@orders_table = $('#orders-table', element).dataTable
bProcessing: true
bServerSide: true
sAjaxSource: ORDERFULL_API
sAjaxDataProp: "objects"
aoColumns: [
# Put the resource name that corresponds to each table column
{
"mData": "id"
"sClass": "order-id"
}
{
"mData": (source, type, val) ->
"#{source.customer.surname} #{source.customer.name}"
"sClass": "customer"
}
{
"mData": "date"
"sClass": "date"
}
{
"mData": "notes"
"bSortable": false
"sClass": "notes"
}
{
"mData": "total_price"
"sClass": "total_price"
}
{
"mData": "order_status.status"
"sClass": "order_status"
}
{
"mData": "online"
"sClass": "online"
}
{
"mData": null
"bSortable": false
"sClass": "btn-wrapper"
}
],
oLanguage: datatable_translation
fnServerData: $.proxy((sSource, oaData, fnCallback, oSettings) ->
# We save the processing element to be able to hide it for the first min_query_length letters
# that we are searching
processing_element = $ '.dataTables_processing', @$el
min_query_length = 3
current_query = oSettings.oPreviousSearch.sSearch
is_searching_number = not isNaN(parseFloat(current_query))
sorting_column_names = []
if oSettings.aaSorting.length > 0
for sorting_array in oSettings.aaSorting
sorted_column_id = sorting_array[0]
direction = if sorting_array[1] is 'desc' then '-' else ''
if is_searching_number
sorting_column_names.push 'total_price'
else if sorted_column_id is 1
# If we want to sort by customer, order by surname and name
sorting_column_names.push direction + 'customer'
else if sorted_column_id is 5
# In case we are ordering by status, use this specific name
sorting_column_names.push direction + 'order_status__id'
else
sorted_column = oSettings.aoColumns[sorted_column_id]
sorting_column_names.push(direction + sorted_column.mData if _.isString(sorted_column.mData))
# Pagination happens here
ajax_data = {
'limit' : oSettings._iDisplayLength
'offset': oSettings._iDisplayStart
}
ajax_data['order_by'] = sorting_column_names.join ',' if sorting_column_names.length > 0
ajax_data['query'] = current_query if current_query isnt ''
if current_query is '' or current_query.length >= min_query_length or is_searching_number
processing_element.css "visibility", "visible"
oSettings.jqXHR = $.ajax
url: sSource
data: ajax_data
success: $.proxy (data) ->
# Pagination happens also here
data.iTotalRecords = data.meta.total_count
data.iTotalDisplayRecords = data.meta.total_count
data.sEcho = oSettings.iDraw # We use this to bypass the xss control done by datatables
fnCallback(data)
, @
error: (xhr, error, thrown) ->
oSettings.oApi._fnLog oSettings, 0, "Error during the datatable's request from the server."
else
processing_element.css "visibility", "hidden"
, @)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment