File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
<meta name="description" content="[add your bin description]" />
    <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>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="tblcontacts" class="display compact" cellspacing="0" width="100%">
      </table>
    </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
 
  /** TEST CASE - change as needed **/
  var useObject = 0 ; // 1 or 0, whatever to test, 1 is the object, 0 is the array of objects
​
  var tabledata = [{"contactid":"cb4f971fcdd4cc06043965dd0b1eb078","rnd2":1,"contactname":"Jenny","contactphone":"(905) 867-5309","contactemail":"jennifer@here.com","priority":"high","contacttype":"sharer","contactaddress":"","doterraid":"","needs":"","datesampled":"0000-00-00 00:00:00","samples":"","invitedclass":0,"enrolled":1,"attendedclass":0,"wellnessconsult":0,"customfield01":1,"customfield02":0,"customfield03":0,"customfield04":0,"customfield05":0,"notes":"doPLANNER girl"},{"contactid":"a494a9b935d698de2264a4d3ff5c0a0a","rnd2":2,"contactname":"waerwef","contactphone":"705-555-1234","contactemail":"","priority":"none","contacttype":"lead","contactaddress":"","doterraid":"","needs":"","datesampled":"0000-00-00 00:00:00","samples":"","invitedclass":0,"enrolled":0,"attendedclass":0,"wellnessconsult":0,"customfield01":0,"customfield02":0,"customfield03":0,"customfield04":0,"customfield05":0,"notes":""},{"contactid":"12920916564446b71a0f99a52bbcb0f1","rnd2":3614,"contactname":"Andrea Duffy","contactphone":"705-111-2222","contactemail":"she-ra@etheria.com","priority":"none","contacttype":"wc","contactaddress":"100 King Court, Sudbury, ON","doterraid":"3321775","needs":"Wowsers","datesampled":"0000-00-00 00:00:00","samples":"Easy Air","invitedclass":1,"enrolled":1,"attendedclass":0,"wellnessconsult":0,"customfield01":1,"customfield02":0,"customfield03":0,"customfield04":0,"customfield05":0,"notes":""}] ;
  
  var statedata_withObject = {"time":9552571144004,"start":0,"length":-1,"order":{"0":[]},"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true},"columns":{"0":{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"1":{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"2":{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"3":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"4":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"5":{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"6":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"7":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"8":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"9":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"10":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"11":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"12":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"13":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"14":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"15":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"16":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"17":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}}},"ColReorder":[]} ;
  var statedata_withArrayOfObjects = {"time":9552571144004,"start":0,"length":-1,"order":{"0":[]},"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true},"columns":[{"0":{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"1":{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"2":{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"3":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"4":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"5":{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"6":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"7":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"8":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"9":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"10":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"11":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"12":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"13":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"14":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"15":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"16":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"17":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}}}],"ColReorder":[]} ;
 
  var statedata = ( useObject === 1 ) ? statedata_withObject : statedata_withArrayOfObjects ;
​
  var usersettings = { fullname: 'Dave' } ;
​
var colin_stateData = {"time":1552905006279,"start":0,"length":-1,"order":[[2,"asc"]],"search":{"search":"Jenny","smart":true,"regex":false,"caseInsensitive":true},"columns":[{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}}]};
​
​
$(document).ready( function () {
var buttons, colReorder, columns, columnDefs, contactSource, stateSaveCallback, stateLoadCallback ;
    
  
    stateSaveCallback = function ( settings, data ){
      return true ;//edited for test case
    } ;
  
  stateLoadCallback = function ( settings, callback ) {
    callback( colin_stateData );//edited for test case
  } ;
  
    
    buttons = [
        { extend: "csv",
      title: usersettings.fullname + "'s Contacts",
      text: '<span title="CSV" class="hidden-md-up fa fa-quote-right"></span><span class="hidden-sm-down">CSV</span>'
    },
        { extend: "excel",
      title: usersettings.fullname + "'s Contacts",
      text: '<i title="Excel" class="hidden-md-up fa fa-file-excel-o"></i><span class="hidden-sm-down">Excel</span>'
    },
        { extend: "pdf",
      orientation: 'landscape',
      title: usersettings.fullname + "'s Contacts",
      customize: function ( doc ) {
                doc.content[1].table.widths = [
                    '15%',
                    '14%',
                    '26%',
                    '45%'
                ] ;
                
              var body = doc.content[1].table.body ;
        Array.prototype.forEach.call( body, function( row ) {
                    row[ 0 ].alignment = 'left' ;
                    row[ 1 ].alignment = 'center' ;
                    row[ 2 ].alignment = 'center' ;
                    row[ 3 ].alignment = 'right' ;
                });
      },
      pageSize: 'LETTER',
      text: '<i title="PDF" class="hidden-md-up fa fa-file-pdf-o"></i><span class="hidden-sm-down">PDF</span>'
    },
    {
      text: '<i title="Delete"  class="hidden-md-up fa fa-times"></i><span class="hidden-sm-down">Delete</span>',
      action: function ( e, dt, node, config ) {
        deleteContacts( e, dt, node, config ) ;
      }
    },
    {
      text: '<i title="Import Customer List" class="hidden-md-up fa fa-upload"></i><span class="hidden-sm-down">Import Customer List</span>',
      action: function ( e, dt, node, config ) {
        selectContactsFile( e, dt, node, config ) ;
      }
    }
  ] ;
    
//  if ( parseInt( document.getElementById( 'dripcampaigncount' ).value ) > 0 ) {//edited for test case
//      buttons.push(
//          {
//              text: '<i title="Add To Drip" class="hidden-md-up fa fa-tint"></i><span class="hidden-sm-down">Add To Drip</span>',
//        action: function ( e, dt, node, config ) {
//          dripContacts( 'all', 'all' ) ;
//        }
//          }
//      ) ;
//  }
    
    buttons.push(
        { 
            extend: "colvis",
            text: '<span title="CSV" class="hidden-md-up fa fa-columns"></span><span class="hidden-sm-down">Show/Hide Columns</span>'
        }
    ) ;
    
    columns = [
        { data: null, render: function ( data, type, row ){
            if(type === 'display'){
                return '<div class="checkbox"><input type="checkbox" class="dt-checkboxes"><label></label></div>' ;
            }
            else {
                return '' ;
            }
    } },
        { data: "contactname", render: function ( data, type, row ){
              if ( type === 'display' ) {
                var pcs, str='' ;
          pcs = data.split( ' ' ) ;
          Array.prototype.forEach.call( pcs, function( pc ) {
                        str+= pc + '<span class="hidden-sm-down"> </span><br class="hidden-md-up"/>' ;
                    });
          
          return str ;
              }
              else {
                return data ;
              }
    } },
        { data: null, render: function ( data, type, row ){
              if ( type === 'display' ) {
          ret = '' ;
          if ( typeof row.contactphone !== 'undefined' || row.contactphone !== null ) {
            ret+= '<a href="tel:' + row.contactphone + '" target="_blank"><i class="fa fa-phone hidden-md-up"></i><span class="hidden-md-down">' + row.contactphone + '</span></a><br/>' +
            '<a href="sms:' + row.contactphone + '" target="_blank"><i class="fa fa-mobile hidden-md-up"></i></a><br class="hidden-md-up"/>' ;
​
          }
          if ( typeof row.contactemail !== 'undefined' || row.contactemail !== null ) {
            ret+= '<a href="mailto:' + row.contactemail + '" target="_blank"><i class="fa fa-envelope-o hidden-md-up"></i><span class="hidden-md-down">' + row.contactemail + '</span></a>' ;
          }
          return ret ;
              }
              else {
                return data ;
              }
    } },
        { data: "priority" },
        { data: "contacttype" },
        { data: "doterraid" },
        { data: "needs" },
        { data: "datesampled" },
        { data: "samples" },
        { data: "invitedclass", render: function ( data, type, row ){
              if ( type === 'display' ) {
          return '<i class="fa fa-' + ( ( parseInt( data ) === 0 ) ? 'times' : 'check' ) + '"></i>';
              }
              else {
                return data ;
              }
    } },
        { data: "attendedclass", render: function ( data, type, row ){
              if ( type === 'display' ) {
          return '<i class="fa fa-' + ( ( parseInt( data ) === 0 ) ? 'times' : 'check' ) + '"></i>';
              }
              else {
                return data ;
              }
    } },
        { data: "enrolled", render: function ( data, type, row ){
              if ( type === 'display' ) {
          return '<i class="fa fa-' + ( ( parseInt( data ) === 0 ) ? 'times' : 'check' ) + '"></i>';
              }
              else {
                return data ;
              }
    } },
        { data: "wellnessconsult", render: function ( data, type, row ){
              if ( type === 'display' ) {
          return '<i class="fa fa-' + ( ( parseInt( data ) === 0 ) ? 'times' : 'check' ) + '"></i>';
              }
              else {
                return data ;
              }
    } }
        
    ] ;
    
    columnDefs = [] ;
​
    var t = 0 ;
    columnDefs.push( {
        'targets': [ t ],
        'checkboxes': {
            'selectRow': true
        },
        'name':'checkboxes'
    } ) ; t++ ;
    columnDefs.push( {
            "targets": [ t ],
            "title": "Name",
            'className': "text-center pointer lnkeditcontact",
            'name':'contactname'
    } ) ; t++ ;
    columnDefs.push( {
            "targets": [ t ],
            "title": "Phone/Email",
            'className': "text-center",
            'name':'phoneemail'
    } ) ; t++ ;
    columnDefs.push( {
            "targets": [ t ],
            "title": "Priority",
            'className': "text-center pointer lnkeditcontact",
            'name':'priority',
            "orderable": false
    } ) ; t++ ;
    columnDefs.push( {
            "targets": [ t ],
            "title": "Type",
            'className': "text-center pointer lnkeditcontact",
            'name':'contacttype',
            "orderable": false
    } ) ; t++ ;
    columnDefs.push( {
            "targets": [ t ],
            "title": "Customer ID",
            'className': "text-center pointer lnkeditcontact",
            'name':'doterraid',
            "visible": false
    } ) ; t++ ;
    columnDefs.push( {
            "targets": [ t ],
            "title": "Needs",
            'className': "text-center pointer lnkeditcontact",
            'name':'needs',
            "visible": false
    } ) ; t++ ;
    columnDefs.push( {
            "targets": [ t ],
            "title": "Date Sampled",
            'className': "text-center pointer lnkeditcontact",
            'name':'datesampled',
            "visible": false
    } ) ; t++ ;
    columnDefs.push( {
            "targets": [ t ],
            "title": "Samples",
            'className': "text-center pointer lnkeditcontact",
            'name':'samples',
            "visible": false
    } ) ; t++ ;
    columnDefs.push( {
            "targets": [ t ],
            "title": "Invited",
            'className': "text-center pointer lnkeditcontact",
            'name':'invitedclass',
            "visible": false,
            "orderable": false
    } ) ; t++ ;
    columnDefs.push( {
            "targets": [ t ],
            "title": "Enrolled",
            'className': "text-center pointer lnkeditcontact",
            'name':'enrolled',
            "visible": false,
            "orderable": false
    } ) ; t++ ;
    columnDefs.push( {
            "targets": [ t ],
            "title": "Attended",
            'className': "text-center pointer lnkeditcontact",
            'name':'attendedclass',
            "visible": false,
            "orderable": false
    } ) ; t++ ;
    columnDefs.push( {
            "targets": [ t ],
            "title": "Consult",
            'className': "text-center pointer lnkeditcontact",
            'name':'wellnessconsult',
            "visible": false,
            "orderable": false
    } ) ; t++ ;
    
    
    var cf = 0 ;
    for( cf=1; cf<=5 ; cf++ ){
        var custom = 'customfield0' + cf ;
        if ( usersettings[ custom ] !== 'N/A' ){
            columns.push( 
                { data: custom, render: function ( data, type, row ){
                      if ( type === 'display' ) {
                    return '<i class="fa fa-' + ( ( parseInt( data ) === 0 ) ? 'times' : 'check' ) + '"></i>';
                      }
                      else {
                        return data ;
                      }
              } }
          ) ;
            
            columnDefs.push( {
                    "targets": [ t ],
                    "title": usersettings[ custom ],
                    'className': "text-center pointer lnkeditcontact",
                    'name':custom,
                    "visible": false,
                    "orderable": false
            } ) ; t++ ;
        }
    }
    
    columns.push( 
        { data: "notes" }
    ) ;
    columns.push( 
        { data: "contactphone" }
    ) ;
    columns.push( 
        { data: "contactemail" }
    ) ;
    columns.push( 
        { data: "contactaddress" }
    ) ;
    
    columnDefs.push( {
            "targets": [ t ],
            "title": "Notes",
            'className': "text-center pointer lnkeditcontact",
            'name':'notes',
            "visible": false
    } ) ; t++ ;
    
    columnDefs.push( {
            "targets": [ t ],
            "title": "Phone",
            'className': "text-center",
            'name':'contactphone',
            "visible": false
    } ) ; t++ ;
    columnDefs.push( {
            "targets": [ t ],
            "title": "Email",
            'className': "text-center",
            'name':'contactemail',
            "visible": false
    } ) ; t++ ;
    columnDefs.push( {
            "targets": [ t ],
            "title": "Address",
            'className': "text-center",
            'name':'contactaddress',
            "visible": false
    } ) ; t++ ;
    
    colReorder = true ;
    
    table = $('#tblcontacts').DataTable({
        fixedHeader: {
            header: true,
            footer: false
        },
    "dom": 'Bifr<"contactstoolbar">t',
        "pageLength": -1,
    select: {
        'style': 'multi'
    },
    "language": {
      "emptyTable": "Retrieving Contacts <i class='fa fa-circle-o-notch fa-spin'></i>",
      "loadingRecords": "Retrieving Contacts <i class='fa fa-circle-o-notch fa-spin'></i>"
    },
        buttons: {
            dom: {
            button: {
              className: 'btn btn-secondary'
            }
          },
            buttons: buttons
        },
        responsive: true,
    //"ajax": contactSource, //edited for test case
      data: tabledata, //edited for test case
    columns: columns,
        "columnDefs": columnDefs,
        'order': [[1, 'asc']],
        initComplete: function () {
            //tblContactComplete() ; //edited for test case
    },
    colReorder: true,
    stateSave:  true,
    stateDuration: ( 60 * 60 * 24 * 1000),
    "stateSaveCallback": function (settings, data) {
      stateSaveCallback( settings, data ) ;
      },
    "stateLoadCallback": function (settings, callback) {
      stateLoadCallback( settings, callback ) ;
    }
    });
} );
`
2 warnings
Line 283: Don't make functions within a loop.
Line 384: Unexpected '`'.
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers