Datatable-ColReorderWithSerachbuilder

by supernova404

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.30.1/moment.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.14.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="//cdn.datatables.net/1.13.11/js/dataTables.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.13.11/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.5/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.5/js/buttons.html5.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="//cdn.datatables.net/colreorder/1.7.0/js/colReorder.dataTables.min.js"></script>
<script src="//cdn.datatables.net/colreorder/1.7.0/js/dataTables.colReorder.min.js"></script>
<script src="//cdn.datatables.net/searchbuilder/1.6.0/js/dataTables.searchBuilder.min.js"></script>
<script src="//cdn.datatables.net/searchbuilder/1.6.0/js/searchBuilder.dataTables.min.js"></script>
<script src="//cdn.datatables.net/datetime/1.5.4/js/dataTables.dateTime.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/keytable/2.12.1/css/keyTable.dataTables.min.css">
<script src="//cdn.datatables.net/keytable/2.12.1/js/dataTables.keyTable.min.js"></script>
<script src="//cdn.datatables.net/keytable/2.12.1/js/keyTable.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/searchbuilder/1.6.0/css/searchBuilder.dataTables.min.css">
<script src="//cdn.datatables.net/select/1.7.0/js/dataTables.select.min.js"></script>
<script...

CSS

/*body {
    padding-top: 50px;
    padding-bottom: 20px;
}*/

html, body {
    min-height: 100%;
    height: 100%;
    font-size: 14px !important;
}

body {
    background-color: #f8f8f8 !important;
}

a {
    color: #03b8e1 !important;
}

div.top {
    position: sticky !important;
    top: 0 !important;
    z-index: 2;
    background-color: white;
    padding-bottom: 100px;
}

.context-menu-list{
    z-index: 100000 !important;
}

.pagination > li > a, .pagination > li > span {
    border-radius: 0 !Important;
    -webkit-border-radius: 0 !Important;
    -moz-border-radius: 0 !Important;
    /*-ms-border-radius: 0 !Important;
    -o-border-radius: 0 !Important;*/
    color: black !important;
    background: #efefef !Important;
    color: black !Important;
    border: none !important;
    margin-right: 2px;
}

html body table.dataTable tbody tr.selected {
    background-color: rgba(64, 98, 93, 0.40) !important; /*#008F7D !important;*/ /*#b4dbae    rgba(0, 143, 125, 0.45) */
    /*    color: white !important;*/
}

table.dataTable {
    border-collapse: collapse !important;
    border-spacing: 1px !important;
}

html table.dataTable tbody tr {
    border: 1px solid #e5e5e5 !important;
}

.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
    background: #008F7D !Important;
    color: white !important;
}


/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

.logginnContainer {
    margin-top: 60px;
    margin-bottom: 60px;
    text-align: center;
}

    .logginnContainer .logo-alt {
        display: none;
    }

    .logginnContainer .logo {
       ...

JavaScript

$(function() {
  $(document).ready(function() {
  var objDataList = [];
  var colsTable = [];
  colsTable.push({
    title: 'Name',
    data: 'name'
  });
  colsTable.push({
    title: 'Position' ,
    data: 'position'
  });
  colsTable.push({
    title: 'Office' ,
    data: 'office'
  });
  colsTable.push({
    title: 'Age',
    data: 'age'
  });
  colsTable.push({
    title: 'Salary',
    data: 'salary'
  });
  let objDataNew = {};
  objDataNew['name'] = 'Tiger Nixon';
  objDataNew['position'] = 'Junior Technical Author';
  objDataNew['office'] = 'Edinburgh';
  objDataNew['age'] = '30';
  objDataNew['salary'] = '$162,700';
  
  objDataList.push(objDataNew);
  
    var reorder = true;
    var table = $('#dynamicTableTest').DataTable({
      columns: colsTable,
      dom:'<"top"Bfrip>rt<"bottom"ip><"clear">', //dom: 'Bfrtip',
      stateSave: false,
      autoWith: false,
      //responsive: true,
      //retrieve: true,
      processing: true,
      select: true,
      stateDuration: -1,
			colReorder: true,
      searchBuilder: {
        columns: ':visible',
      },
      order: [],
      //scrollY: '60vh',
      //scrollCollapse: true,
      //scrollX: '100%',
		language: {
                "sEmptyTable": "No data available in table",
                "sInfo": "Showing _START_ to _END_ of _TOTAL_ entries ",
                "sInfoEmpty": "Showing 0 to 0 of 0 entries ",
                "sInfoFiltered": " (filtered from _MAX_ total entries) ",
                "sInfoPostFix": "",
                "sInfoThousands": ",",
                "sLengthMenu": "Show _MENU_ entries ",
                "sLoadingRecords": "Loading...",
                //"sProcessing": "Processing...",
                "sSearch": "Search:",
                "sZeroRecords": "No matching records found",
                "oPaginate": {
                    "sFirst": "First",
                    "sLast": "Last",
                    "sNext": "Next",
                    "sPrevious": "Previous"
              ...