Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
​
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
​
  
<link href="https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.0.8/af-2.7.0/b-3.0.2/b-colvis-3.0.2/b-html5-3.0.2/b-print-3.0.2/cr-2.0.3/date-1.5.2/fc-5.0.1/fh-4.0.1/kt-2.12.1/r-3.0.2/rg-1.5.0/rr-1.5.0/sc-2.4.3/sb-1.7.1/sp-2.3.1/sl-2.0.3/sr-1.4.1/datatables.min.css" rel="stylesheet">
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/v/dt/jszip-3.10.1/dt-2.0.8/af-2.7.0/b-3.0.2/b-colvis-3.0.2/b-html5-3.0.2/b-print-3.0.2/cr-2.0.3/date-1.5.2/fc-5.0.1/fh-4.0.1/kt-2.12.1/r-3.0.2/rg-1.5.0/rr-1.5.0/sc-2.4.3/sb-1.7.1/sp-2.3.1/sl-2.0.3/sr-1.4.1/datatables.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>-->
   <meta charset=utf-8 />
<main id="main" role="main">
  
  {{test}}
      <h1>test</h1>
  
    <data-table-pay-age :value="[
{name:'abc',inspNumber:'P123',liabNumber:'L321',orgAmount:'25',daysPastDue:'10',mpCode:'101'},
{name:'bcd',inspNumber:'P223',liabNumber:'L322',orgAmount:'25',daysPastDue:'11',mpCode:'102'},
{name:'efg',inspNumber:'P323',liabNumber:'L323',orgAmount:'25',daysPastDue:'15',mpCode:'103'},
  {name:'hij',inspNumber:'P424',liabNumber:'L324',orgAmount:'25',daysPastDue:'5',mpCode:'104'}
                                
                                  
                                    
                                  
                                
                                ]"></data-table-pay-age>
  </main>
</body>
  
  
</html>
 
​
//var table = new DataTable('#example');
​
​
$(document).ready(function(){
 
  Vue.component('data-table-pay-age', {
        inheritAttrs : false,
        props : [ 'value' ],
        data : function() {
            return {
                dt : ""
            };
        },
​
        computed : {
            rowData : function() {
                let dtArr = [];
                $.each(this.value, function() {
                    let dtRow = {
                        name : this.name,
                        inspNumber : this.inspNumber,
                        liabNumber : this.liabNumber,
                        orgAmount : this.orgAmount,
                        daysPastDue : this.daysPastDue,
                        mpCode : this.mpCode
                    };
                    dtArr.push(dtRow);
                });
                return dtArr;
            }
        },
        watch : {
            value : {
                handler : function(val, oldVal) {
                    let dtArr = [];
                    $.each(val, function() {
                        let dtRow = {
                        name : this.name,
                        inspNumber : this.inspNumber,
                        liabNumber : this.liabNumber,
                        orgAmount : this.orgAmount,
                        daysPastDue : this.daysPastDue,
                        mpCode : this.mpCode
                        };
                        dtArr.push(dtRow);
                    });
                    this.dt.clear().rows.add(dtArr).columns.adjust().draw();
                },
                deep : true
            }
        },
        template : `
        <table class="display table table-striped" style="width:100%" id="pTable">
          <thead>
            <tr>
            
             <th scope="col">Number</th>
             <th scope="col">Code</th>
             <th scope="col">Name</th>
             <th scope="col">Amount Due($)</th>
             <th scope="col">Days past Due</th>
             <th scope="col">Due Number</th>
 
            </tr>
          </thead>
          <tbody>
            
          </tbody>
        </table>
      `,
        mounted : function() {
            this.$nextTick(function() {
                let vApp = this;
                let editor;
                this.dt = $(vApp.$el).DataTable({
                    responsive : true,
                    data : vApp.rowData,
                    language : {
                        "emptyTable" : "No Records found."
                    },
                    columns : [
                        {
                            data : 'inspNumber',
                            responsivePriority : 1
                        },
                        {
                            data : 'mpCode',
                            responsivePriority : 3,
                            className : 'text-right',
                        },
                        {
                            data : 'name',
                            responsivePriority : 3
                        },
                        {
                            data : 'orgAmount',
                            responsivePriority : 5,
                            className : 'text-right',
                        },
                        {
                            data : 'daysPastDue',
                            responsivePriority : 1,
                            className : 'text-right',
                        },
                        {
                            data : 'liabNumber',
                            responsivePriority : 1
                        },
                    ],
                    dom : "<'col-sm-3'l><'row'<'col-sm-7'B><'col-sm-5'f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'col-sm-4'i><'col-sm-8'p>>",
                    //"dom": '<"top"lBrt><"bottom"ipB><"clear">',
                    buttons : [
                        {
                            extend : 'print',
                            orientation : 'landscape',
                            title : 'Payments By Age',
                            exportOptions : {
                                columns : "thead th:not(.noExport)"
                            }
                        },
                        {
                            extend : 'excel',
                            title : 'Payments By Age',
                            exportOptions : {
                                columns : "thead th:not(.noExport)"
                            }
                        },
                        {
                            extend : 'pdf',
                            orientation : 'landscape',
                            title : 'Payments By Age',
                            exportOptions : {
                                columns : "thead th:not(.noExport)"
                            }
                        }
                    ],
                    order : [ [ 1, "desc" ] ]
                });
            })
        },
        beforeDestroy : function() {
            //this.dt
        }
    });
  
  
  var appRoot = new Vue({
        el : '#main',
    data:{
      
      test:"Hi this is a check",
      
    },
    computed : {
​
        },
        watch : {
​
        },
    methods : {
      
    },
    
    mounted : function(){
      this.$nextTick(function(){
        console.log("Loaded..");
        $("main#main").removeClass("d-none");
      })
    }
  });
​
});
Output

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

Dismiss x
public
Bin info
prak1shpro
0viewers