File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
    <script src="https://cdn.datatables.net/searchbuilder/1.3.0/js/dataTables.searchBuilder.min.js"></script>
    <script src="https://cdn.datatables.net/searchpanes/1.4.0/js/dataTables.searchPanes.min.js"></script>
    <script src="https://cdn.datatables.net/select/1.3.4/js/dataTables.select.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/dataTables.buttons.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.print.min.js"></script>
    <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
    <script src="https://cdn.datatables.net/datetime/1.1.1/js/dataTables.dateTime.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.0/dist/barcodes/JsBarcode.code128.min.js"></script>
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
   <div class="dtsp-verticalContainer">
  <div class="dtsp-verticalPanes"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="panel panel-default">
          <div class="panel-body">
            <table id="example" class="display responsive nowrap" style="width:100%">
              <thead>
                <tr>
                  <th>Number</th>
                  <th>Category</th>
                  <th>Divided Code</th>
                  <th>Description</th>
                  <th>Date Added</th>
                  <th>Barcode</th>
                </tr>
              </thead>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
  </body>
</html>
CSSSaved
 
body {
  font: 90%/1.45em "Helvetica Neue", HelveticaNeue, Verdana, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #fff;
}
​
JavaScriptSaved
 
​
$(document).ready(function() {
  var table =$('#example').DataTable( {
    data: [
      {
        "number": "Test1",
        "description": "test 123",
        "category": "Test 123",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 134"
      },
      {
        "number": "Test 4",
        "description": "test test",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 123"
      },
      {
        "number": "Test1",
        "description": "test 23",
        "category": "Test 123",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 234"
      },
      {
        "number": "Test 3",
        "description": "test 345",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 13"
      },
      {
        "number": "Test 3",
        "description": "test 345",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 13"
      },
      {
        "number": "Test1",
        "description": "test 123",
        "category": "Test 123",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 134"
      },
      {
        "number": "Test 4",
        "description": "test test",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 123"
      },
      {
        "number": "Test1",
        "description": "test 23",
        "category": "Test 123",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 234"
      },
      {
        "number": "Test 3",
        "description": "test 345",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 13"
      },
      {
        "number": "Test 3",
        "description": "test 345",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 13"
      },
      {
        "number": "Test1",
        "description": "test 123",
        "category": "Test 123",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 134"
      },
      {
        "number": "Test 4",
        "description": "test test",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 123"
      },
      {
        "number": "Test1",
        "description": "test 23",
        "category": "Test 123",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 234"
      },
      {
        "number": "Test 3",
        "description": "test 345",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 13"
      },
      {
        "number": "Test 3",
        "description": "test 345",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 13"
      },
      {
        "number": "Test1",
        "description": "test 123",
        "category": "Test 123",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 134"
      },
      {
        "number": "Test 4",
        "description": "test test",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 123"
      },
      {
        "number": "Test1",
        "description": "test 23",
        "category": "Test 123",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 234"
      },
      {
        "number": "Test 3",
        "description": "test 345",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 13"
      },
      {
        "number": "Test 3",
        "description": "test 345",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 13"
      },
      {
        "number": "Test1",
        "description": "test 123",
        "category": "Test 123",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 134"
      },
      {
        "number": "Test 4",
        "description": "test test",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 123"
      },
      {
        "number": "Test1",
        "description": "test 23",
        "category": "Test 123",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 234"
      },
      {
        "number": "Test 3",
        "description": "test 345",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 13"
      },
      {
        "number": "Test 3",
        "description": "test 345",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 13"
      },
      {
        "number": "Test1",
        "description": "test 123",
        "category": "Test 123",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 134"
      },
      {
        "number": "Test 4",
        "description": "test test",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 123"
      },
      {
        "number": "Test1",
        "description": "test 23",
        "category": "Test 123",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 234"
      },
      {
        "number": "Test 3",
        "description": "test 345",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 13"
      },
      {
        "number": "Test 3",
        "description": "test 345",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 13"
      }
​
​
    ],
​
    dom: '<"dtsp-dataTable"Bfrtip>',
    buttons: [
      { extend: 'pageLength', className: 'btn pageLengthButton' },
      {
        extend: 'collection', className: 'btn exportButton' ,
        text: 'Export Options',
        buttons: [
          {
            extend: 'csvHtml5',
            text: 'CSV',
            className: 'btn csvButton', 
            exportOptions: {
              stripHtml: false
            }
          },
          {
            extend: 'excelHtml5',
            text: 'Excel',
            className: 'btn excelButton',
            exportOptions: {
              stripHtml: false
            }
          },
          {
            extend: 'pdfHtml5',
            orientation: 'landscape',
            title: 'test',
            className: 'btn pdfButton',
            exportOptions: {
              stripHtml: true,
              columns: [0, 1, 2, 4, 5],
              page:'current'
            },
            customize: function ( doc ) {
              doc['footer']=(function(page, pages) {
                return {
                  columns: [
​
                    {
                      alignment: 'center',
                      text: [
                        { text: page.toString(), italics: true },
                        ' of ',
                        { text: pages.toString(), italics: true }
                      ]
                    }
                  ],
                  margin: [5, 20]
                };
              });
              var arr = $('.barcode').map(function(){
                return this.src;
              }).get();
              for (var i = 0, c = 1; i < arr.length; i++, c++) {
                doc.content[1].table.body[c][4] = {
                  image: arr[i],
                  width: 75
                };
              }
            }
​
          }
        ]
      },
      { extend: 'searchBuilder', className: 'btn searchBuilderButton' }
    ],
    pageLength: 25,
    lengthMenu: [[ 10, 25, 50, -1], [ 10, 25, 50, "All"]],
    responsive: {
      details: {
        display: $.fn.dataTable.Responsive.display.childRowImmediate
      }
    },
    columns: [
      { data: "number" },
      { data: "category" },
      { data: "dividedCode" },
      { data: "description" },
      { data: "dateAdded" },
      { data: "barCode", name: "Barcode", 
       "render": function(data, type, row){
         var barcode = '<img class="barcode" jsbarcode-value="' + data + '"  jsbarcode-displayValue="true" jsbarcode-fontSize="12" jsbarcode-width="1" jsbarcode-height="20"/>';
         return barcode;
​
       }
      }
    ],
    columnDefs: [
      { responsivePriority: 1, targets: 0 },
      { responsivePriority: 1, targets: -1 }
    ],
    language: {
      searchBuilder: {
        button: 'Advanced Filter',
        title: 'OneBlood Product Code List'
      }
    },
    initComplete: function( settings, json ) {
      JsBarcode( '.barcode' ).init();
    }
  } );
​
​
  
  table.on('draw.dt', function () {
    JsBarcode( '.barcode' ).init();
  });
​
​
​
} );
​
1 warning
Line 283: ['footer'] is better written in dot notation.
Output 300px

This bin was created anonymously and its free preview time has expired. Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers