DataTables is a plug-in for the jQuery Javascript library. It is a highly flexible tool, built upon the foundations of progressive enhancement, that adds all of these advanced features to any HTML table. You can add advanced interaction controls to your HTML tables using data tables.

To place sort icon to left or immediately after the text heading of table, use the following css

table.dataTable thead th {
    background: transparent !important;
    white-space: nowrap;
}

table.dataTable thead span.sort-icon {
    display: inline-block;
    padding-left: 5px;
    width: 16px;
    height: 16px;
}

table.dataTable thead .sorting span {
    background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_both.png') no-repeat center right;
}
table.dataTable thead .sorting_asc span {
    background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc.png') no-repeat center right;
}
table.dataTable thead .sorting_desc span {
    background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc.png') no-repeat center right;
}

table.dataTable thead .sorting_asc_disabled span {
    background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_asc_disabled.png') no-repeat center right;
}
table.dataTable thead .sorting_desc_disabled span {
    background: url('http://cdn.datatables.net/plug-ins/3cfcc339e89/integration/bootstrap/images/sort_desc_disabled.png') no-repeat center right;
}

table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before,
table.dataTable thead .sorting_asc_disabled::before,
table.dataTable thead .sorting_desc_disabled::before {
    content: "";
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting_asc_disabled::after,
table.dataTable thead .sorting_desc_disabled::after {
    content: "";
}

Now that we have added CSS, its time to add some JS so that sort icons are placed appropriately. First, you need to initialize datatables and place the sort icon. To add icon on the left of the header in datatables add following

      $(document).ready(function () {
          var table = $('#datatables').DataTable();

          table.columns().iterator('column', function (ctx, idx) {
              $(table.column(idx).header()).prepend('<span class="sort-icon"/>');
          });
      });

To add sort icon after header text in datatables apply following js code

      $(document).ready(function () {
          var table = $('#datatables').DataTable();

          table.columns().iterator('column', function (ctx, idx) {
              $(table.column(idx).header()).append('<span class="sort-icon"/>');
          });
      });

What’s happening here

To keep it short, we we have done is remove default implementation if sort icon and added new icon using JS.

Version used

This implementation was tested with DataTables 1.10.18. This might not work with older version of datatables so please do test and let other know in the comment what you changed to make it work.