Sorting doesn't work after ajax data load datatables jquery

ijunaidfarooq

I have posted the question on stackover flow as well no one is ready to help so now coming here. and its urgent...

In our application we have a table of cameras and currently am getting all cameras in Apps controller and returning them in form of JSON to Datables. every thing is working fine except 2 things.

1: Sorting don't work on any column. after putting "aaSorting": [[5, "desc"]] it just show an sorting icon on that column but dont do any sort + else columns just do the same thing..

2: As we put some values to filter then filter shows records for 2 pages. But when we click the pagination to move on next page. filter just removed and the 2 page out of 274 (which are total rows without filter) is being showed in view.

cameras_table = undefined
page_load = true

sendAJAXRequest = (settings) ->
  token = $('meta[name="csrf-token"]')
  if token.size() > 0
    headers =
      "X-CSRF-Token": token.attr("content")
    settings.headers = headers
  xhrRequestChangeMonth = jQuery.ajax(settings)
  true

initializeDataTable = ->
  cameras_table = new Datatable
  headers = undefined
  token = $('meta[name="csrf-token"]')

  if token.size() > 0
    headers = 'X-CSRF-Token': token.attr('content')

  cameras_table.init
    src: $('#cameras_datatables')
    onSuccess: (grid) ->
      # execute some code after table records loaded
      return
    onError: (grid) ->
      # execute some code on network or other general error
      return
    onDataLoad: (grid) ->
      #do something
    dataTable:
      'bStateSave': false
      'lengthMenu': [
        [ 25, 50, 100, 150 ]
        [ 25, 50, 100, 150 ]
      ]
      'pageLength': 50
      'processing': true
      'language': 'processing': '<img src="/assets/loading.gif">'
      'ajax':
        'method': 'GET'
        'headers': headers
        'url': '/load_cameras'
      columns: [
        {data: "0", "render": linkCamera },
        {data: "1", "render": linkOwner },
        {data: "2" },
        {data: "3" },
        {data: "4" },
        {data: "5" },
        {data: "6" },
        {data: "7" },
        {data: "8" },
        {data: "9" },
        {data: "10" },
        {data: "11" },
        {data: "12", "render": colorStatus },
        {data: "13", "sType": "uk_datetime" },
        {data: "14", visible: false }
      ],
      initComplete: ->
        # execute some code on network or other general error

searchFilter = ->
  $('.table-group-action-input').on "keyup", ->
    action = $('.table-group-action-input').val()
    cameras_table.setAjaxParam 'fquery', action.replace("'","''")
    cameras_table.getDataTable().ajax.reload()
    cameras_table.clearAjaxParams()
    return

columnsDropdown = ->
  $(".cameras-column").on "click", ->
    column = cameras_table.getDataTable().column($(this).attr("data-val"))
    column.visible !column.visible()

colorStatus = (name) ->
  if name is "true" || name is true
    return "<span style='color: green;'>True</span>"
  else if name is "false" || name is false
    return "<span style='color: red;'>False</span>"

linkCamera = (name, type, row) ->
  return "<a href='/cameras/#{row[15]}'>#{row[0]}</a>"

linkOwner = (name, type, row) ->
  return "<a href='/users/#{row[16]}'>#{row[1]}</a>"

showTable = ->
  $(window).load ->
    $('#cameras-list-row').removeClass 'hide'

window.initializeCameras = ->
  columnsDropdown()
  initializeDataTable()
  showTable()
  searchFilter()

NOTE: while clicking on columns headers it shows as its doing something like loading or else but dont show results accordingly.

Any help will be appreciated. thanks.

http://stackoverflow.com/questions/36019529/sorting-doesnt-work-after-ajax-data-load-datatables-jquery