File
Add library
Share
Login or Register
Help
HTMLSaved
 
<!DOCTYPE html>
<html>
  <head>
​
    <link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.8.8/semantic.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/v/se/jq-3.7.0/jszip-3.10.1/dt-2.1.6/af-2.7.0/b-3.1.2/b-colvis-3.1.2/b-html5-3.1.2/b-print-3.1.2/cr-2.0.4/date-1.5.4/fc-5.0.1/fh-4.0.1/rr-1.5.0/sc-2.4.3/sb-1.8.0/sp-2.3.2/sl-2.1.0/sr-1.4.1/datatables.min.css" rel="stylesheet">
    <link href="https://editor.datatables.net/extensions/Editor/css/editor.dataTables.min.css" rel="stylesheet" type="text/css" />
    
 
​
<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/se/jq-3.7.0/jszip-3.10.1/dt-2.1.6/af-2.7.0/b-3.1.2/b-colvis-3.1.2/b-html5-3.1.2/b-print-3.1.2/cr-2.0.4/date-1.5.4/fc-5.0.1/fh-4.0.1/rr-1.5.0/sc-2.4.3/sb-1.8.0/sp-2.3.2/sl-2.1.0/sr-1.4.1/datatables.min.js"></script>
 <script src="https://editor.datatables.net/extensions/Editor/js/dataTables.editor.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.8.8/semantic.min.js"></script>
    
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body class="ui">
    <div class="ui container">
      <div id="buttonBox1"></div>
      <table id="example" class="ui striped single line compact celled table" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </tfoot>
​
        <tbody>
          <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett Winters</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton Cox</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
          <tr>
            <td>Cedric Kelly</td>
            <td>Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2012/03/29</td>
            <td>$3,600</td>
          </tr>
          <tr>
            <td>Jenna Elliott</td>
            <td>Financial Controller</td>
            <td>Edinburgh</td>
            <td>33</td>
            <td>2008/11/28</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td>2012/12/02</td>
            <td>$4,525</td>
          </tr>
          <tr>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td>2012/08/06</td>
            <td>$4,080</td>
          </tr>
          <tr>
            <td>Rhona Davidson</td>
            <td>Integration Specialist</td>
            <td>Edinburgh</td>
            <td>55</td>
            <td>2010/10/14</td>
            <td>$6,730</td>
          </tr>
          <tr>
            <td>Colleen Hurst</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td>2009/09/15</td>
            <td>$5,000</td>
          </tr>
          <tr>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>2008/12/13</td>
            <td>$3,600</td>
          </tr>
          <tr>
            <td>Jena Gaines</td>
            <td>System Architect</td>
            <td>London</td>
            <td>30</td>
            <td>2008/12/19</td>
            <td>$5,000</td>
          </tr>
          <tr>
            <td>Quinn Flynn</td>
            <td>Financial Controller</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>2013/03/03</td>
            <td>$4,200</td>
          </tr>
          <tr>
            <td>Charde Marshall</td>
            <td>Regional Director</td>
            <td>San Francisco</td>
            <td>36</td>
            <td>2008/10/16</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Haley Kennedy</td>
            <td>Senior Marketing Designer</td>
            <td>London</td>
            <td>43</td>
            <td>2012/12/18</td>
            <td>$4,800</td>
          </tr>
          <tr>
            <td>Tatyana Fitzpatrick</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>19</td>
            <td>2010/03/17</td>
            <td>$2,875</td>
          </tr>
          <tr>
            <td>Michael Silva</td>
            <td>Senior Marketing Designer</td>
            <td>London</td>
            <td>66</td>
            <td>2012/11/27</td>
            <td>$3,750</td>
          </tr>
          <tr>
            <td>Paul Byrd</td>
            <td>Javascript Developer</td>
            <td>New York</td>
            <td>64</td>
            <td>2010/06/09</td>
            <td>$5,000</td>
          </tr>
          <tr>
            <td>Gloria Little</td>
            <td>Systems Administrator</td>
            <td>New York</td>
            <td>59</td>
            <td>2009/04/10</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Bradley Greer</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>41</td>
            <td>2012/10/13</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Dai Rios</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>35</td>
            <td>2012/09/26</td>
            <td>$4,200</td>
          </tr>
          <tr>
            <td>Jenette Caldwell</td>
            <td>Financial Controller</td>
            <td>New York</td>
            <td>30</td>
            <td>2011/09/03</td>
            <td>$4,965</td>
          </tr>
          <tr>
            <td>Yuri Berry</td>
            <td>System Architect</td>
            <td>New York</td>
            <td>40</td>
            <td>2009/06/25</td>
            <td>$3,600</td>
          </tr>
          <tr>
            <td>Caesar Vance</td>
            <td>Technical Author</td>
            <td>New York</td>
            <td>21</td>
            <td>2011/12/12</td>
            <td>$4,965</td>
          </tr>
          <tr>
            <td>Doris Wilder</td>
            <td>Sales Assistant</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>2010/09/20</td>
            <td>$4,965</td>
          </tr>
          <tr>
            <td>Angelica Ramos</td>
            <td>System Architect</td>
            <td>London</td>
            <td>36</td>
            <td>2009/10/09</td>
            <td>$2,875</td>
          </tr>
          <tr>
            <td>Gavin Joyce</td>
            <td>Developer</td>
            <td>Edinburgh</td>
            <td>42</td>
            <td>2010/12/22</td>
            <td>$4,525</td>
          </tr>
          <tr>
            <td>Jennifer Chang</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>28</td>
            <td>2010/11/14</td>
            <td>$4,080</td>
          </tr>
          <tr>
            <td>Brenden Wagner</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>18</td>
            <td>2011/06/07</td>
            <td>$3,750</td>
          </tr>
          <tr>
            <td>Ebony Grimes</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>48</td>
            <td>2010/03/11</td>
            <td>$2,875</td>
          </tr>
          <tr>
            <td>Russell Chavez</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>20</td>
            <td>2011/08/14</td>
            <td>$3,600</td>
          </tr>
          <tr>
            <td>Michelle House</td>
            <td>Integration Specialist</td>
            <td>Edinburgh</td>
            <td>37</td>
            <td>2011/06/02</td>
            <td>$3,750</td>
          </tr>
          <tr>
            <td>Suki Burks</td>
            <td>Developer</td>
            <td>London</td>
            <td>53</td>
            <td>2009/10/22</td>
            <td>$2,875</td>
          </tr>
          <tr>
            <td>Prescott Bartlett</td>
            <td>Technical Author</td>
            <td>London</td>
            <td>27</td>
            <td>2011/05/07</td>
            <td>$6,730</td>
          </tr>
          <tr>
            <td>Gavin Cortez</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>22</td>
            <td>2008/10/26</td>
            <td>$6,730</td>
          </tr>
          <tr>
            <td>Martena Mccray</td>
            <td>Integration Specialist</td>
            <td>Edinburgh</td>
            <td>46</td>
            <td>2011/03/09</td>
            <td>$4,080</td>
          </tr>
          <tr>
            <td>Unity Butler</td>
            <td>Senior Marketing Designer</td>
            <td>San Francisco</td>
            <td>47</td>
            <td>2009/12/09</td>
            <td>$3,750</td>
          </tr>
          <tr>
            <td>Howard Hatfield</td>
            <td>Financial Controller</td>
            <td>San Francisco</td>
            <td>51</td>
            <td>2008/12/16</td>
            <td>$4,080</td>
          </tr>
          <tr>
            <td>Hope Fuentes</td>
            <td>Financial Controller</td>
            <td>San Francisco</td>
            <td>41</td>
            <td>2010/02/12</td>
            <td>$4,200</td>
          </tr>
          <tr>
            <td>Vivian Harrell</td>
            <td>System Architect</td>
            <td>San Francisco</td>
            <td>62</td>
            <td>2009/02/14</td>
            <td>$4,965</td>
          </tr>
          <tr>
            <td>Timothy Mooney</td>
            <td>Financial Controller</td>
            <td>London</td>
            <td>37</td>
            <td>2008/12/11</td>
            <td>$4,200</td>
          </tr>
          <tr>
            <td>Jackson Bradshaw</td>
            <td>Director</td>
            <td>New York</td>
            <td>65</td>
            <td>2008/09/26</td>
            <td>$5,000</td>
          </tr>
          <tr>
            <td>Miriam Weiss</td>
            <td>Support Engineer</td>
            <td>Edinburgh</td>
            <td>64</td>
            <td>2011/02/03</td>
            <td>$4,965</td>
          </tr>
          <tr>
            <td>Bruno Nash</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>38</td>
            <td>2011/05/03</td>
            <td>$4,200</td>
          </tr>
          <tr>
            <td>Odessa Jackson</td>
            <td>Support Engineer</td>
            <td>Edinburgh</td>
            <td>37</td>
            <td>2009/08/19</td>
            <td>$3,600</td>
          </tr>
          <tr>
            <td>Thor Walton</td>
            <td>Developer</td>
            <td>New York</td>
            <td>61</td>
            <td>2013/08/11</td>
            <td>$3,600</td>
          </tr>
          <tr>
            <td>Finn Camacho</td>
            <td>Support Engineer</td>
            <td>San Francisco</td>
            <td>47</td>
            <td>2009/07/07</td>
            <td>$4,800</td>
          </tr>
          <tr>
            <td>Elton Baldwin</td>
            <td>Data Coordinator</td>
            <td>Edinburgh</td>
            <td>64</td>
            <td>2012/04/09</td>
            <td>$6,730</td>
          </tr>
          <tr>
            <td>Zenaida Frank</td>
            <td>Software Engineer</td>
            <td>New York</td>
            <td>63</td>
            <td>2010/01/04</td>
            <td>$4,800</td>
          </tr>
          <tr>
            <td>Zorita Serrano</td>
            <td>Software Engineer</td>
            <td>San Francisco</td>
            <td>56</td>
            <td>2012/06/01</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Jennifer Acosta</td>
            <td>Javascript Developer</td>
            <td>Edinburgh</td>
            <td>43</td>
            <td>2013/02/01</td>
            <td>$2,875</td>
          </tr>
          <tr>
            <td>Cara Stevens</td>
            <td>Sales Assistant</td>
            <td>New York</td>
            <td>46</td>
            <td>2011/12/06</td>
            <td>$4,800</td>
          </tr>
          <tr>
            <td>Hermione Butler</td>
            <td>Director</td>
            <td>London</td>
            <td>47</td>
            <td>2011/03/21</td>
            <td>$4,080</td>
          </tr>
          <tr>
            <td>Lael Greer</td>
            <td>Systems Administrator</td>
            <td>London</td>
            <td>21</td>
            <td>2009/02/27</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Jonas Alexander</td>
            <td>Developer</td>
            <td>San Francisco</td>
            <td>30</td>
            <td>2010/07/14</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Shad Decker</td>
            <td>Regional Director</td>
            <td>Edinburgh</td>
            <td>51</td>
            <td>2008/11/13</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Michael Bruce</td>
            <td>Javascript Developer</td>
            <td>Edinburgh</td>
            <td>29</td>
            <td>2011/06/27</td>
            <td>$4,080</td>
          </tr>
          <tr>
            <td>Donna Snider</td>
            <td>System Architect</td>
            <td>New York</td>
            <td>27</td>
            <td>2011/01/25</td>
            <td>$3,120</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
​
CSSSaved
 
body {
​
    overflow-x:scroll !important; 
    margin: 0px auto;
    padding: 0px;
    text-align: center;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    /*font-family: Lato, "Helvetica Neue", Arial, Helvetica, sans-serif !important;*/
    font-size:14px;
    position:relative;
    background-color:#FFF;
    color: black;
}
​
html, body
{
    background-color: #F3F4F5;
}
​
.dataTables_length
{
    float: left;
    margin-right: 50px;
}
​
.dataTables_filter 
{ 
    float:left !important; 
    clear:both !important; 
}
​
.dataTables_filter label, .dataTables_filter input, .dataTables_length select{ float:none !important; margin-top:5px; }
​
.noTitleStuff .ui-dialog-titlebar {display:none}
​
.ui.toggle.buttons .active.button, .ui.button
{
    /*background-color: #007fff !important;*/
}
​
.ui.dt-buttons
{
    /*background-color: #73b9ff;*/
}
​
.dt-buttons
{
    margin-bottom:0px !important;
}
div.dt-container div.dt-layout-row
{
    margin: .25em 0 !important;
}
​
div.dt-buttons.ui.buttons
{
    flex-wrap: nowrap;
}
​
.ui.button.buttons-columnVisibility.active
{
    background-color: #007fff !important;
    border-left: 1px solid rgba(0,0,0,.13);
    /*max-width: 100px;
    white-space: break-spaces;*/
}
​
.ui.button.extraButtons
{
    background-color: #ff9019 !important;
}
​
.ui.button.btn_editUSPS
{
    background-color: orange !important;
}
​
.ui.button.btn_addUSPS
{
    background-color: blue !important;
}
​
td.uspsOK, td.hotMailOK, td.fedExMailOK, td.fedExParcelOK, td.upsMailOK
{
    color: #00B308;
}
​
td.uspsWarn
{
    color: orange;
    font-weight: bold;
}
​
td.uspsError
{
    color: red;
    font-weight: bold;
}
​
td.rateError
{
    color: red;
    font-weight: bold;
}
​
td.rateWarn
{
    color: orange;
    font-weight: bold;
}
​
td.rateNotSet
{
    color: black;
}
​
​
td.highlight
{
    font-weight:bold;
    color:#F00;
}
​
td.cssCompTot
{
    color:#00B308;
    font-weight:bold;
}
​
​
td.sqsCompSelf
{
    font-weight:bold;
    color:#000
}
/*red color*/
td.sqsBelowBreak
{
    font-weight:bold;
    color:#F00;
}
/*yellow color*/
td.sqsCheaperComp
{
    font-weight:bold;
    color:#ED9522;
}
td.sqsNoData
{
    font-weight:bold;
    color: darkorange;
}
​
td.sqsCompTotWarn
{
    font-weight:bold;
    color:#F00;
}
td.sqsNoRecords
{
    font-weight:bold;
    color:#00F;
}
td.otherSQSused
{
    font-weight:bold;
    color:#F0F;
}
td.sqsCompTotUpdated
{
    font-weight:bold;
    color:#C90;
}
td.bestPrice
{
    font-weight:bold;
    color:#00D100;
}
td.prodNameForce
{
    max-width: 750px !important;
    min-width: 750px !important;
    white-space: normal !important; 
}
​
​
table.dataTable tbody tr.selected {
    /* color: white !important;*/
    background-color: lightgrey !important;
}
​
div.DTE_Inline div.DTE_Inline_Field div.DTE_Field input[type="text"]
{
    min-width: 70px !important;
}
​
td.sqsCompTotWarn
{
    font-weight:bold;
    color:#F00;
}
td.sqsNoRecords
{
    font-weight:bold;
    color:#00F;
}
td.otherSQSused
{
    font-weight:bold;
    color:#F0F;
}
td.sqsCompTotUpdated
{
    font-weight:bold;
    color:#C90;
}
td.bestPrice
{
    font-weight:bold;
    color:#00D100;
}
​
.ui.button.rate_standard
{
    background: linear-gradient(-60deg, royalblue 50%, whitesmoke 50%) !important;
    margin-bottom: 5px;
    /*background-color: red !important;*/
}
​
.ui.button.rate_hotMail, .ui.button.btn_deleteRate, .ui.button.btn_deleteBox 
{
​
    background-color: firebrick !important;
    margin-bottom: 5px;
}
​
.ui.button.rate_flat
{
    background-color: royalblue !important;
    margin-bottom: 5px;
}
​
.ui.button.rate_fedexground
{
    background: linear-gradient(-60deg, lightgreen 50%, whitesmoke 50%) !important;
    margin-bottom: 5px;
    /*background-color: red !important;*/
}
​
.ui.button.rate_fedex
{
    background-color: lightgreen !important;
    margin-bottom: 5px;
}
​
.ui.button.rate_ups
{
    background-color: brown !important;
    margin-bottom: 5px;
}
​
.ui.button.btn_boxUse
{
    background-color: green !important;
}
​
.ui.button.btn_boxEdit
{
    background-color: orange !important;
}
​
.ui.button.btn_boxDelete
{
    background-color: red !important;
    margin-left:25px !important;
}
​
.ui.button.btn_addBox 
{
    background-color: green !important;
}
​
.ui.tabular.menu .active.item
{
    background-color: #007fff;
    color: white;
}
​
.ui.tabular.menu .item
{
    background-color: rgb(224, 225, 226);
    color: black;
}
​
.noRate
{
    font-weight:bold;
}
.greenRate
{
    color:#00B308;
    font-weight:bold;
}
​
.yellowRate
{
    color: orange;
    font-weight:bold;
}
​
.redRate
{
    color: red;
    font-weight:bold;
}
​
#DTE_Field_skuLink
{
    min-width: 150px !important;
}
​
#sortTemplates 
{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    width: 60%; 
}
​
#sortTemplates li 
{ 
    margin: 0 3px 3px 3px;
    padding: 0.4em; 
    padding-left: 1.5em; 
    font-size: 1.4em;
    /*height: 1.5em; */
}
​
#sortTemplates li span 
{ 
    position: absolute; 
    margin-left: -1.3em; 
}
​
.ui-state-highlight 
{ 
    height: 44.7px;
    line-height: 1.2em;
    background-color: lightblue;
}
JavaScriptSaved
 
var $j = jQuery.noConflict();
​
DataTable.defaults.layout = 
  {
  topStart: null,
  topEnd: null,
  bottomStart: null,
  bottomEnd: null
};
​
$j('#example').DataTable(
  {
    //data: d.data,
    autoFill: false,
    colReorder: true,
    //deferRender: false,
​
    layout: {
      topStart:
      {
        pageLength: 
        { 
          menu: [[10, 25, 50, 500, 1000, -1], [10, 25, 50, 500, 1000, "All"]],    
        },
        info: {},
        search : {},
        div: 
        {
          id: 'buttonBox1',
        },
​
      },
​
      bottom: ['info', 'paging'],
    },
​
​
    buttons: [
      {
        extend:'columnsToggle',
      },
      {
        extend: 'excel',
        className: 'extraButtons',
        exportOptions: { columns: ':visible', orthogonal: 'export' }
      },
​
      {
        extend: 'print',
        className: 'extraButtons',
        exportOptions: { columns: ':visible', orthogonal: 'export' }
      }, 
      {
        extend: 'excelHtml5',
        className: 'extraButtons',
        text:'Offline Edit',
        exportOptions: 
        { 
          trim: false, 
          stripHtml: false,
          columns: '.excelExport',
          orthogonal: 'export',
          format: 
          {
            header: function ( html, index, node ) 
            {
              var table = $j('#example').DataTable();
              let data = table.column(index).dataSrc();
              return data;
            }
          }
        }
      },
    ],
      //dom: 'Blifrtip',
      autoWidth: false,
      //lengthMenu: [[10, 25, 50, 500, 1000, -1], [10, 25, 50, 500, 1000, "All"]],
      select: true,
      //pageLength: 50,
      fixedHeader: true,
      initComplete: function(settings, json) 
      {
​
      },
      /*
      columns: [
​
      // etc
    ],
    */
​
    rowCallback: function ( row, data, index, cell ) 
    {
​
    },
​
    createdRow: function( row, data, index, cells )
    {
​
    },
    columnDefs:
    [
​
    ],
    //order: [[1, 'asc']],
  });
                
var table = $j('#example').DataTable();
​
​
table.buttons().container().addClass('toggle');
​
​
table.buttons( 0, null ).container().appendTo( $j('#buttonBox1') );    
$j('.dataTables_filter').removeClass('form');
1 warning
Line 68: 'let' is available in ES6 (use esnext option) or Mozilla JS extensions (use moz).
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers