//= require jquery
//= require dataTables/jquery.dataTables
//= require_tree .

$(function() {
  $(document).on('click', '.mail a.preview', function() {
    console.log(this);
    $(this).colorbox({width:"80%", height:"80%", iframe:true});
  });

  $(document).on('click', '.mail a.raw', function(){
    $.get($(this).attr('href'), function(data){
      $('#raw div').text(data);
    });
    return false;
  });

  $("table").dataTable({
    "aaSorting": [[3, "desc"]],
    "aoColumns": [
      null,
      null,
      null,
      null,
      { "bSortable": false }
    ]
  });

});

//= require jquery
//= require dataTables/jquery.dataTables
//= require_tree .

$(function() {
  $('body').on('click', 'a.preview', function() {
    $(this).colorbox({width:"80%", height:"80%", iframe:true});
  });

  $('body').on('click', 'a.raw', function(){
    $.get($(this).attr('href'), function(data){
      $('#raw div').text(data);
    });
    return false;
  });

  $("table").dataTable({
    "aaSorting": [[3, "desc"]],
    "aoColumns": [
      null,
      null,
      null,
      null,
      { "bSortable": false }
    ]
  });

  
});

Use proper $.on delegate binding. This ensures anything added to the dom later (i.e. rows of the next page) get the events. Also removed console.log call.
Use proper $.on delegate binding.
This ensures anything added to the dom later (i.e. rows of the next page) get the events.
Also removed console.log call.
