gistfile1.txt

@app.directive 'myTable', ["$compile", "$location", ($compile, $location) ->
  return {
    scope: {}
    controller: ($scope, $element) ->
      $scope.nEditing = null
      $scope.oTable = $scope.dataTable
        
      $scope.filterTable = ->
        $scope.dataTable.fnDraw()
      
      $scope.editRow = ( oTable, nRow ) ->
        aData = oTable.fnGetData(nRow)
        jqTds = $('>td', nRow)
        $element.find('th').each (index, elem) ->
          jqTds[index].innerHTML = '<input type="text" value="">'
          
      $scope.$parent.newRow = ->
        rowData = []
        $element.find('th').each (index, elem) ->
          rowData.push("")
        aiNew = $scope.dataTable.fnAddData( rowData, false)
        console.log(aiNew)
        nRow = $scope.dataTable.fnGetNodes( aiNew[0] )
        $scope.editRow( $scope.dataTable, nRow )
        nEditing = nRow
        
      $scope.saveRow = ( oTable, nRow ) ->
        jqInputs = $('input', nRow)
        $element.find('th').each (index, elem) ->
          $scope.dataTable.fnUpdate( jqInputs[index].value, nRow, index, false )
        $scope.dataTable.fnUpdate( '<a class="edit" href="">Edit</a>', nRow, $element.find('th').length, false )
        $scope.dataTable.fnDraw()
        # send ajax request to save row
        $scope.inlineSave(jqInputs)
        
    link: (scope, element, attrs) ->
      # apply DataTable options, use defaults if none specified by user
      options = {}
      if attrs.myTable.length == 0
        return alert("Please config table options")
      else
        options = scope.$parent.$eval(attrs.myTable)

      # Tell the dataTables plugin what columns to use
      # We can either derive them from the dom, or use setup from the controller           
      explicitColumns = []
      element.find('th').each (index, elem) ->
        explicitColumns.push($(elem).text())
      
      # custom the tool bar
      if element.data("toolbar")
        toolbar = '<"resource-toolbar row-fluid resource-header grey-bar"<"resource-details"><"i-msg" i>>rt'
        options["sDom"] = toolbar
        
      empty_data = '<div style="position:relative;"><span class="blank_slate"><span>Welcome to TradeGap.</span><br/><small>There are no records yet. Create one now.</small></span></div>'
      options["oLanguage"] = { "sInfo": "(_END_ of _TOTAL_)", "sInfoEmpty": "(0 of 0)", "sEmptyTable": empty_data}
      
      options["fnServerData"] = ( sSource, aoData, fnCallback ) ->
        aoData.push( { "name": "sFilterOptions", "value": $(".resource-filter").val()} )
        aoData.push( { "name": "sSearch", "value": $("#sSearch").val()} )
        $(".resource-filter-item").each (index) ->
          if ($(this).is(':checked'))
            aoData.push( { "name": $(this).data("name"), "value": "true"} )
        $.ajax({
              "dataType": 'json', 
              "type": "GET", 
              "url": sSource, 
              "data": aoData, 
              "success": fnCallback
            })    
            
      if (attrs.aoColumns) 
        options["aoColumns"] = scope.$parent.$eval(attrs.aoColumns)
      else if explicitColumns.length > 0
        options["aoColumns"] = explicitColumns
      
      # aoColumnDefs is dataTables way of providing fine control over column config
      if attrs.aoColumnDefs
        options["aoColumnDefs"] = scope.$parent.$eval(attrs.aoColumnDefs)
      
      if attrs.fnRowCallback
        options["fnRowCallback"] = scope.$parent.$eval(attrs.fnRowCallback)
      
      if element.data("scrolly")
        options["bScrollInfinite"] = true
        options["bScrollCollapse"] = true
        options["sScrollY"] = (document.documentElement.clientHeight - parseInt(element.data("scrolly"))) + "px"

      scope.dataTable = element.dataTable(options)
      
      if element.data("scrolly")
        $(window).resize () ->
          if this.resizeTO 
            clearTimeout(this.resizeTO)
          this.resizeTO = setTimeout(() ->
              $(this).trigger('resizeEnd')
          , 500)
        $(window).bind 'resizeEnd', () ->
          newHeight = (document.documentElement.clientHeight - parseInt(element.data("scrolly"))) + "px"
          $(".dataTables_scrollBody").css("height", newHeight)
          if scope.dataTable.fnSettings()
            scope.dataTable.fnSettings().oScroll.sY = newHeight
            scope.dataTable.fnDraw()
      
      # angualr toobar
      toolbar = element.data("toolbar")
      if toolbar
        $(".resource-toolbar").append($compile("<div ng-include src=\"'#{toolbar}'\"></div>")(scope))
        resource_name = $('<h3 class="resource-name">'+scope.$parent.resourceName+'</h3>')
        $(".resource-details").prepend(resource_name)

      $(".resource-filter").live "change", (event) ->
        scope.dataTable.fnDraw()

      $("#sSearch").live "keyup", (event) ->
        scope.dataTable.fnDraw()
        
      $(".resource-item a:not(.ignore), .resource-item td:not(.ignore)").live "click", (event) ->
        $location.path($(this).parent().data("href"))
        scope.$apply()
  }
]