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.min.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.min.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 1234"
    },
    {
        "number": "Test 2",
        "description": "test 3345",
        "category": "Test 432",
        "dividedCode": "00",
        "dateAdded": "2021-05-19",
        "barCode": "Test 123"
    }
   
],
            searchPanes: {
                layout: 'columns-1'
            },
            dom: '<"dtsp-dataTable"frtip>',
            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: 'csv', className: 'btn csvButton' },
                        { extend: 'excel', className: 'btn excelButton' },*/
                        {
                            extend: 'pdfHtml5',
                            orientation: 'portrait',
                            className: 'btn excelButton',
                            customize: function ( doc ) {
                                if (table.rows({selected: true}).count() === 0) {
                                    // nothing selected, so do your current code
                                }
                                else {
                                    var arr2 = $('tr.selected .img-fluid').map(function(){
                                        return this.src;
                                    }).get();
                                    for (var i = 0, c = 1; i < arr2.length; i++, c++) {
                                        doc.content[1].table.body[c][5] = {
                                            image: arr2[i],
                                            width: 100
                                        };
                                    }
                                }
                            },
                            exportOptions: {
                                stripHtml: false,
                                columns: ':visible',
                                search: 'applied',
                                order: 'applied'
                            }
​
                        },
                        {
                            extend: 'print',
                            className: 'btn printButton',
                            exportOptions: {
                                stripHtml: false
                            }
                        }   
                    ]
                },
                { extend: 'searchBuilder', className: 'btn searchBuilderButton' }
            ],
            dom: 'Bfrtip',
            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", 
                 "render": function(data, type, row){
                     return '<img class="barcode" jsbarcode-value="' + data + '" />';
                 }
                }
            ],
            "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();
        });
        table.searchPanes();
        $("div.dtsp-verticalPanes").append(table.searchPanes.container());
​
​
    } );
​
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers