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 rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.20/sp-1.0.1/sl-1.3.1/datatables.min.css"/>
 
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.20/sp-1.0.1/sl-1.3.1/datatables.min.js"></script>
​
    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
  <body>
    <div class="container">
      <table id="example" class="display nowrap" width="100%">
        <thead>
          <tr>
            <th>Name</th>
            <th>Filename</th>
            <th>Line Type</th>
            <th>Reason</th>
          </tr>
        </thead>
​
        <tfoot>
          <tr>
            <th>Name</th>
            <th>Filename</th>
            <th>Line Type</th>
            <th>Reason</th>
          </tr>
        </tfoot>
​
​
      </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
 
​
    function randomStringGenerator(len, charSet) {
        charSet = charSet || 'ABC DEFGHI JKLMNO PQRSTUVWX YZab cdefghijkl mnopqrst uvwxyz012345 6789';
        var randomString = '';
        for (var i = 0; i < len; i++) {
            var randomPoz = Math.floor(Math.random() * charSet.length);
            randomString += charSet.substring(randomPoz,randomPoz+1);
        }
        return randomString;
    }
​
​
​
​
var totalRows = 10000;
var numNames = 10;
var nameCount = 0;
var name = '';
​
var numfiles = 5;
var filesCount = 0;
var filename = '';
​
var data = [];
​
for (r=0; r<totalRows; r++) {
​
  if ( nameCount % numNames === 0 ) {
    name = randomStringGenerator(12);
  }
  
  if ( filesCount % numfiles === 0 ) {
    filename = randomStringGenerator(12) + '/CDR_' + randomStringGenerator(4) + '/' + randomStringGenerator(4);
  }
  
  nameCount++;
  filesCount++;
 
  data.push(
    {
      name: name,
      filename: filename,
      line_type: 'Line Type ' + Math.floor(Math.random() * (totalRows / 2)),
      reason: 'Reason' + Math.floor(Math.random() * 5)
    }
  );
  
}
​
​
$(document).ready( function () {
  var table = $('#example').DataTable({
    dom: 'Plftrip',
    data: data,
    searchPanes:{
      cascadePanes: true,
      targets: 'sp-view',
      dataLength: 50,
    },
​
    columns: [
      {
        data: 'name',
        className: 'sp-view',
        searchPanes: {
          className: 'dt-left',
          show: true
        },
      },
      {
        data: 'filename',
        className: 'sp-view',
        searchPanes: {
          orthogonal:'sp',
          className: 'dt-left',
          show: true
        },
        render: function (data, type, row) {
          if (type === 'sp') {
            var dirs = data.split('/');
            filename = '';                        
            regex = /CDR_*/g;
                        
            for (i=0; i<dirs.length; i++) {
              found = dirs[i].match(regex);
​
              if ( found ) {
                filename = found[0];
                //break;
              }
            }
            filename += '/' + dirs[dirs.length - 1];
            return filename;
          }
          return data;                
        }
      },
      {
        data: 'line_type',
        className: 'sp-view',
        searchPanes: {
          className: 'dt-left',
          show: true
        },
      },
      {
        data: 'reason',
        className: 'sp-view',
        searchPanes: {
          className: 'dt-left',
          show: true
        },
      }
    ]
  });
} );
​
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers