Reposition Search Box, Page Length, Info & Paging Elements

EnterTheBlackDragon

I've been researching how to perform these actions, but finally I simply turned my chair 90 degrees to the right and asked a colleague who is pretty savvy at JavaScript and CSS. He suggested 1 thing which worked and now I'm going to share with everyone since everyone has their own answer but none solved my issue.

Problem: You've implemented ajax web service, your datatable is fine, but the Search box is way off to the right and page length way off to the left, same with info and paginate. Doing the dom: l, f, i, p thing isn't going to solve it, trying to modify the actual CSS File isn't going to solve it. The answer is simple so let me past below.

<style>
.dataTables_wrapper .dataTables_filter {
right: 300px;
position: relative;
}

  .dataTables_wrapper .dataTables_length {
      left: 300px;
      position: relative;
    }

  .dataTables_wrapper .dataTables_info {
      left: 300px;
      position: relative;
  }

  .dataTables_wrapper .dataTables_paginate {
      right: 300px;
      position: relative;
  }
</style>

Leave the script references alone, the link references alone. All you need to do is literally copy and past this within the head of your html code. Reload the page and see that the elements have all shifted inwards. Play around with the right and left positions only. The position attribute should be left alone as it is used in conjunction with your right and left pixel definition. I'm by no means a javascript or css expert, I am more C#, full stack software developer. So when I find answers to complex problems I tend to want to share them as I know how frustrating it can be to find a solution to a really complex issue.

This style tag will override the default positions of the elements and will allow you to design the look and feel of the datatable making your design look just as clean as it does in the examples within this site.

Good luck everyone