Technical references: ColdFusion and DataTable Example

ColdFusion and DataTable Example

If you are new to DataTable like me, this should provide you with the necessary basics to get you going and helps to make sense of examples over at Datables.net.

<html>
<head>
<style>
tfoot input {
      width:100%;
      padding:3px;
      box-sizing:border-box;
}
th,td {
      padding:15px;
}
table#t00 {
      width:100%;
      border-spacing:5px;
      padding:15px;
      border:2px solid #dddddd;
      border-collapse:collapse;
      background-color: #eee;
}
</style>
<link type="text/css" 
      rel="stylesheet" 
      href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" 
      media="all"/>
<script type="text/javascript" 
        src="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
</script>
</head>

Here's the Head portion of HTML. Line 3-20 is optional, but it is in there so that I can override some style inside linked stylesheet (line 21). Line 12 is there so I can give one table a unique look. Line 21 is one linked stylesheet. You can link as many as you want. Line 25 is datatable JS file. You can also have as many of these as you like.

1
2
3

<cfquery name="somedata" datasource="MYSOURCE">
      select blah1,blah2,blah3 from sometable
</cfquery>

Above is the CFML to call a query.

<body>
  <table id="t00">
    <tr>
      <td>Main Menu</td>
    </tr>
  </table>

Above we have our use of the style we defined earlier for this table Id.

<table id="meatTable" class="table table-striped table-bordered nowrap" border="1">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </tfoot>
  <tbody>
    <cfoutput query="somedata">
      <tr>
        <th>#blah1#</th>
        <th>#blah2#</th>
        <th>#blah3#</th>
      </tr>
    </cfoutput>
  </tbody>
</table>

Above is our main table. We call the CFML in the tbody section to populate it with the previously called query. You need thead section for proper heading behavior (sort) for the table and tfoot section for footer behavior (search). This will become more obvious in the actual javascript portion in the end.

<script type="text/javascript">
  $(document).ready(function(){
    $('#meatTable tfoot th').each( function () {
      var title = $(this).text();
      $(this).html( '<input type="text" placeholder="Search '+title+'" />');
    } );
    var table = $('#meatTable').DataTable();

    table.columns().every( function () {
      var that = this;
      $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
          that
              .search( this.value )
              .draw();
        }
      } );
    } );
  } );
</script>
</body>
</html>

This is the last portion. We can reference the table that is being used by using single pound sign (line 3 and 7). Line 3 populates the search by column by putting them in the footer of the table. Line 7 is used to declare the Datatable variable which is used in the rest of the script. That is it. Now you should be able to put the pieces together that you find in the DataTables examples page.

Technical references

Wednesday, August 2, 2017

ColdFusion and DataTable Example

ColdFusion and DataTable Example

No comments:

Post a Comment

AWS WAF log4j query