<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.24/b-1.7.0/b-html5-1.7.0/b-print-1.7.0/date-1.0.3/cr-1.5.3/r-2.2.7/rg-1.1.2/sl-1.3.3/datatables.min.css" />
<link type="text/css" href="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/css/dataTables.checkboxes.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/jszip-2.5.0/dt-1.10.24/b-1.7.0/b-colvis-1.7.0/b-html5-1.7.0/b-print-1.7.0/cr-1.5.3/r-2.2.7/rg-1.1.2/sl-1.3.3/datatables.min.js"></script>
<!--<script type="text/javascript" src="js/datatables.min.js?r=<?=$PgVr?>"></script>-->
<script type="text/javascript" src="//gyrocode.github.io/jquery-datatables-checkboxes/1.2.12/js/dataTables.checkboxes.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.7.0/js/buttons.colVis.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
      </table>
    </div>
  </body>
</html>
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
.dt-button-collection .dropdown-menu .buttons-columnVisibility:before,
.dt-button-collection .dropdown-menu .buttons-columnVisibility.active span:before {
  display:block;
  position:absolute;
  top:1.2em;
  left:0;
  width:12px;
  height:12px;
  box-sizing:border-box;
}
.dt-button-collection .dropdown-menu .buttons-columnVisibility:before {
  content:' ';
  margin-top:-8px;
  margin-left:10px;
  border:1px solid black;
  border-radius:3px;
}
.dt-button-collection .dropdown-menu .buttons-columnVisibility.active span:before {
  font-family: 'Arial' !important;
  content:'\2714';
  margin-top: -15px;
  margin-left: 12px;
  text-align: center;
  text-shadow: 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;
}
.dt-button-collection .dropdown-menu .buttons-columnVisibility span {
  margin-left:17px;    
}
 
$(document).ready( function () {
  let theJSON = '{"deposits":[{"id":"608ff8a4bbf2e90e4035bf39","createdOn":"2020-10-29 11:01:45","routingNo":6811780850,"accountNo":860009835,"checkNumber":957,"amount":499501,"auxOnUS":18,"itemSeqNo":361894895904,"reviewedBy":"Mcknight Mitchell","createdBy":"Walters Jackson","status":"Declined","imageFront":"front1.png","imageBack":"back2.png"},{"id":"608ff8a48b3cc0a019160a7e","createdOn":"2020-10-03 08:23:42","routingNo":6491402648,"accountNo":318253790,"checkNumber":249,"amount":238770,"auxOnUS":3,"itemSeqNo":746530562042,"reviewedBy":"Rene Guzman","createdBy":"Krista Curry","status":"Declined","imageFront":"front1.png","imageBack":"back2.png"},{"id":"608ff8a4c90acfeab969f9a4","createdOn":"2020-07-11 03:31:50","routingNo":7720171666,"accountNo":151669401,"checkNumber":223,"amount":907,"auxOnUS":33,"itemSeqNo":348065022697,"reviewedBy":"Jennifer Humphrey","createdBy":"Daisy Ayala","status":"Declined","imageFront":"front2.png","imageBack":"back2.png"},{"id":"608ff8a45ef9ee5a70d27b3b","createdOn":"2020-08-20 01:37:17","routingNo":3343636849,"accountNo":570565240,"checkNumber":266,"amount":352580,"auxOnUS":12,"itemSeqNo":439947831921,"reviewedBy":"Hines Wyatt","createdBy":"Stacey Barry","status":"Declined","imageFront":"front2.png","imageBack":"back1.png"},{"id":"608ff8a443e26df8ee6011ae","createdOn":"2021-04-28 12:10:00","routingNo":7269137516,"accountNo":589745054,"checkNumber":198,"amount":490469,"auxOnUS":13,"itemSeqNo":707377381668,"reviewedBy":"Johnnie Cox","createdBy":"Nanette Becker","status":"Declined","imageFront":"front1.png","imageBack":"back2.png"},{"id":"608ff8a49f493a227b102e17","createdOn":"2021-02-04 12:21:49","routingNo":4498310462,"accountNo":490336699,"checkNumber":192,"amount":825574,"auxOnUS":16,"itemSeqNo":119938758772,"reviewedBy":"Alisha Foley","createdBy":"Ericka Martin","status":"In Review","imageFront":"front2.png","imageBack":"back2.png"},{"id":"608ff8a4df2f3ccc60fd8b37","createdOn":"2020-11-16 05:17:52","routingNo":1650775865,"accountNo":459400668,"checkNumber":104,"amount":689368,"auxOnUS":34,"itemSeqNo":824227189550,"reviewedBy":"Bullock Delgado","createdBy":"Austin Galloway","status":"Posted","imageFront":"front1.png","imageBack":"back1.png"},{"id":"608ff8a44fc36a36d4fc1bab","createdOn":"2021-04-06 12:54:39","routingNo":4501941657,"accountNo":460467103,"checkNumber":446,"amount":900032,"auxOnUS":3,"itemSeqNo":657090140868,"reviewedBy":"Hubbard Riley","createdBy":"Lorrie Lancaster","status":"Declined","imageFront":"front2.png","imageBack":"back2.png"},{"id":"608ff8a4a6e508b4abce16e0","createdOn":"2020-07-23 12:19:29","routingNo":9846402635,"accountNo":429754821,"checkNumber":291,"amount":451883,"auxOnUS":32,"itemSeqNo":947616489704,"reviewedBy":"Erin Pacheco","createdBy":"French Lucas","status":"Posted","imageFront":"front2.png","imageBack":"back1.png"},{"id":"608ff8a400f5516c1d8c515c","createdOn":"2020-09-09 11:50:17","routingNo":9320087999,"accountNo":110515528,"checkNumber":344,"amount":998093,"auxOnUS":37,"itemSeqNo":440993358483,"reviewedBy":"Dionne Wells","createdBy":"Craft Armstrong","status":"In Review","imageFront":"front1.png","imageBack":"back2.png"}]}';
  let inJSON = JSON.parse(theJSON).deposits;
  let tempTable = $('#example').DataTable({
        data: inJSON,
        order: [[1, "asc"]],
        dom: "<'row'<'col-sm-12 col-md-4'<'row'<'#ColVisHolder.col-sm-12 col-md-2 col-lg-1'><'col-sm-12 col-md-10 col-lg-11'l>>><'col-sm-12 col-md-4 text-center'B><'col-sm-12 col-md-4'f>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row mt-3'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>",
        columnDefs: [{
            targets: 0,
            checkboxes: {
                'selectRow': true
            }
        }],
        colReorder: true,
        stateSave: true,
        buttons:[
            {
                extend: 'colvis',
                columns: [1, 2, 3, 4, 5, 6, 7, 8]
            },
            {
                extend: 'collection',
                text: 'Actions',
                name: 'Actions',
                enabled: false,
                autoClose: true,
                buttons: [
                    {
                        text: 'Add to My List',
                        action: function(e, dt, node, config){
                            AddDocsToMyList();
                        }
                    },
                    {
                        text: 'Combine',
                        action: function(e, dt, node, config){
                            CombineDocs();
                        }
                    },
                    {
                        text: 'Delete',
                        action: function(e, dt, node, config){
                            $('#DeleteSelectedDocsModal').modal('show');
                        }
                    },
                    {
                        extend: 'pdf',
                        text: 'Download'
                    },
                    {
                        extend: 'print',
                        text: 'Print'
                    },
                    {
                        text: 'Upload',
                        action: function(e, dt, node, config){
                            UploadDocs();
                        }
                    }
                ]
            },
            {
                text: "Refine&nbsp;Search",
                action: function(e, dt, node, config){
                    ShowRefineSearchModal();
                }
            },
            {
                extend: "selected",
                text: "View",
                action: function(e, dt, node, config){
                    ViewSelectedDocs();
                }
            }
        ],
        language:{
            search: "_INPUT_",
            searchPlaceholder: "Find in Results...",
        },
        pagingType: "full",
        //paging: false,
        responsive: {
            details: {
                type: 'column',
                target: 0
            }
        },
        select: {
            style: 'multi',
            selector: 'td:first-child'
        },
        columns: [
            {tile: null, data: null},
            {title: "Created On", data: "createdOn"},
            {title: "Account", data: "accountNo"},
            {
                title: "Amount",
                data: "amount", 
                render: function(data, type, row, meta){
                    return $.fn.dataTable.render.number( ',', '.', 2, '$' ).display(data/100);
                }
            },
            {title: "AuxOnUS", data: "auxOnUS"},
            {title: "ItemSeqNo", data: "itemSeqNo"},
            {title: "Reviewed By", data: "reviewedBy"},
            {title: "Item Status", data: "status"},
            {title: "Created By", data: "createdBy"}
        ]
    });
} );
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers