Dandelion-Datatables 1.0.0 Documentation

<datatables:table id="myTableId" data="${persons}" row="person"> (1)
  <datatables:column title="Mail">
    <a href="mailto:${person.mail}">${person.mail}</a> (2)
  </datatables:column>
</datatables:table>

<table id="myTableId" dt:table="true">
  <thead>
    <tr>
      <th>Mail</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="person : ${persons}">
      <td><a th:href="${'mailto:' + person.mail}" th:text="${person.mail}">john@doe.com</a></td>
    </tr>
  </tbody>
</table>

<datatables:table id="myTableId" data="${persons}" row="person">
  <datatables:column title="Row index">
    Row index : <c:out value="${person_rowIndex}" />
  </datatables:column>
</datatables:table>

<table id="myTableId" dt:table="true">
  <thead>
    <tr>
      <th>Row index</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="person,iterStat : ${persons}">
      <td th:text="${iterStat.index}">0</td>
    </tr>
  </tbody>
</table>

var oTable_[tableId] = $('#[tableId]');
var oTable_[tableId]_params = {...};
$(document).ready(function(){
  oTable_[tableId] = $('#[tableId]').dataTable(oTable_[tableId]_params);
});

<datatables:table id="myTableId" data="${persons}">
  <datatables:column property="id" sortable="false" /> (1)
  <datatables:column property="firstName" />
  <datatables:column property="lastName" />
  <datatables:column property="address.town.name" />
  <datatables:column property="mail" sortable="false" /> (1)
</datatables:table>

<table id="myTableId" dt:table="true">
  <thead>
    <tr>
      <th dt:sortable="false">Id</th> (1)
      <th>Firstname</th>
      <th>Lastname</th>
      <th>City</th>
      <th>Mail</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="person : ${persons}">
      <td th:text="${person.id}">1</td>
      <td th:text="${person.firstName}">John</td>
      <td th:text="${person.lastName}">Doe</td>
      <td th:text="${person.address.town.name}">Nobody knows!</td>
      <td th:text="${person.mail}">john@doe.com</td>
    </tr>
  </tbody>
</table>

<datatables:table id="myTableId" data="${persons}">
   ...
   <datatables:column title="FirstName" property="firstName" filterable="true" />
   ...
</datatables:table>

<table id="myTableId" dt:table="true">
   <thead>
      <tr>
         ...
         <th dt:filterable="true">FirstName</th>
         ...
      </tr>
   </thead>
   ...
</table>

<datatables:table id="myTableId" data="${persons}">
  ...
  <datatables:column title="FirstName" property="firstName" searchable="false" />
  ...
</datatables:table>

<datatables:table id="myTableId" data="${persons}" dom="l0rtip" filterSelector="#filterButton" filterClearSelector="#filterClearButton">
  <datatables:column ... filterable="true" filterType="select" />
  <datatables:column ... filterable="true" />
  <datatables:column ... filterable="true" />
  <datatables:extraHtml uid="0" cssStyle="float:right;">
    <a id="filterButton" class="btn btn-primary">Apply filters</a>
    <a id="filterClearButton" class="btn btn-inverse">Clear filters</a>
  </datatables:extraHtml>
</datatables:table>

<div dt:conf="myTableId"> (1)
  <div dt:confType="extrahtml" dt:uid="0" dt:cssStyle="float:right;">
    <a id="filterButton">Apply filters</a>
    <a id="filterClearButton">Clear filters</a>
  </div>
</div>

<table id="myTableId" dt:table="true" dt:dom="l0rtip" dt:filterSelector="#filterButton" dt:filterClearSelector="#filterClearButton">
  <thead>
    <tr>
      <th dt:name="firstname" dt:filterable="true" dt:filterType="select">Firstname</th>
      <th dt:name="lastname" dt:filterable="true">Lastname</th>
      <th dt:name="city" dt:filterable="true">City</th>
    </tr>
  </thead>
  ...
</table>

<datatables:table id="myTableId" url="/persons" serverSide="true" filterDelay="1000">
  ...
</datatables:table>

<table id="myTableId" dt:table="true" dt:url="@{/persons}" dt:serverside="true" dt:filterDelay="1000">
  ...
</table>

<datatables:table id="myTableId" ... scrollY="200px" pageable="false">
  ...
</datatables:table>

<datatables:table id="myTableId" ... scrollX="120%">
  ...
</datatables:table>

<table id="myTable" dt:table="true" ... dt:scrollx="120%">
  ...
</table>

<table id="myTableId" dt:table="true">
  <thead>
    <tr>
      <th>Id</th>
      <th>Firstname</th>
      <th>Lastname</th>
      <th>City</th>
      <th>Mail</th>
      <th dt:sortable="false">
        <input type="checkbox" onclick="$('#myTableId').find(':checkbox').attr('checked', this.checked);" />
      </th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="person : ${persons}">
      <td th:text="${person.id}">1</td>
      <td th:text="${person.firstName}">John</td>
      <td th:text="${person.lastName}">Doe</td>
      <td th:text="${person.address.town.name}">Nobody knows !</td>
      <td th:text="${person.mail}">john@doe.com</td>
      <td style="text-align:center;">
        <input type="checkbox" th:value="${person.id}" />
      </td>
    </tr>
  </tbody>
</table>

<datatables:table id="myTableId" ... theme="bootstrap2" cssClass="table table-striped">
  ...
</datatables:table>

<table id="myTableId" dt:table="true" dt:theme="bootstrap2" class="table table-striped">
  ...
</table>

<datatables:table id="myTableId" ... theme="bootstrap3" cssClass="table table-striped">
  ...
</datatables:table>

<table id="myTableId" dt:table="true" ... dt:theme="bootstrap3" class="table table-striped">
  ...
</table>

<dependency>
  <groupId>com.github.dandelion</groupId>
  <artifactId>datatables-export-poi</artifactId>
  <version>1.0.0</version>
</dependency>

<dependency>
  <groupId>com.github.dandelion</groupId>
  <artifactId>datatables-export-poi-ooxml</artifactId>
  <version>1.0.0</version>
</dependency>

<dependency>
  <groupId>com.github.dandelion</groupId>
  <artifactId>datatables-export-itext</artifactId>
  <version>1.0.0</version>
</dependency>

<!-- Dandelion-Datatables filter, used for basic export -->
<filter>
  <filter-name>datatables</filter-name>
  <filter-class>com.github.dandelion.datatables.core.web.filter.DatatablesFilter</filter-class>
</filter>
<filter-mapping>
  <filter-name>datatables</filter-name>
  <url-pattern>/*</url-pattern>
</filter-mapping>

<datatables:table id="myTableId" data="${persons}" row="person" export="xlsx">
  ...
  <datatables:column title="Mail" display="html"> (1)
    <a href="mailto:${person.mail}">${person.mail}</a>
  </datatables:column>
  <datatables:column title="Mail" property="mail" display="xlsx" /> (2)
  ...
</datatables:table>

<table id="myTableId" dt:table="true" dt:export="xlsx">
  <thead>
    <tr>
      <th>Mail</th>
    </tr>
  </thead>
  <tbody>
    <tr th:each="person : ${persons}">
      <td dt:xlsx="${person?.mail}"> (1)
        <a th:href="${'mailto:' + person?.mail}" th:text="${person?.mail}">john@doe.com</a> (2)
      </td>
    </tr>
  </tbody>
</table>

@Controller
@RequestMapping(value = "/export") (1)
public class ExportController {

   @Autowired
   private PersonService personService;

   @RequestMapping(produces = "text/csv") (2)
   public void csv(@DatatablesParams DatatablesCriterias criterias, HttpServletRequest request, HttpServletResponse response) throws ExportException, IOException { (3)

   // Get data to export
   List<Person> persons = personService.findPersonsWithDatatablesCriterias(criterias).getRows();

   // Build the export configuration
   ExportConf csvConf = new ExportConf.Builder(ReservedFormat.CSV)
      .header(true)
      .exportClass(new CsvExport())
      .build();

   // Build the table to export from the data and the export configuration
   HtmlTable table = new HtmlTableBuilder<Person>().newBuilder("tableId", persons, request, csvConf)
      .column().fillWithProperty("id").title("Id")
      .column().fillWithProperty("firstName").title("Firtname")
      .column().fillWithProperty("lastName").title("Lastname")
      .column().fillWithProperty("address.town.name").title("City")
      .column().fillWithProperty("mail").title("Mail")
      .column().fillWithProperty("birthDate", "{0,date,dd-MM-yyyy}").title("BirthDate")
      .build();

   // Render the export in the browser
   ExportUtils.renderExport(table, exportCsvConf, response);
}

<datatables:table id="myTableId" data="${persons}" export="csv,xml">
  ...
  <datatables:export type="csv" cssClass="btn" /> (1)
  <datatables:export type="xml" cssClass="btn" label="XML export" /> (2)
</datatables:table>

<div dt:conf="myTableId"> (1)
  <div dt:confType="export" dt:type="pdf" dt:cssClass="btn" dt:url="@{/export.pdf}"></div> (2)
  <div dt:confType="export" dt:type="xls" dt:cssClass="btn" dt:url="@{/export.xls}"></div> (3)
</div>

<table id="myTableId" dt:table="true" dt:url="@{/persons}" dt:serverside="true" dt:processing="true" dt:export="pdf,xls"> (1)
  ...
</table>

<datatables:table id="myTableId" url="/persons" serverSide="true" processing="true" export="pdf,xls" dom="lEfrtiEp">
  ...
  <datatables:export type="pdf" cssClass="btn" url="/export.pdf" />
  <datatables:export type="xls" cssClass="btn" url="/export.xls" />
</datatables:table>

<div dt:conf="myTableId">
  <div dt:confType="export" dt:type="pdf" dt:cssClass="btn" dt:url="@{/export.pdf}"></div>
  <div dt:confType="export" dt:type="xls" dt:cssClass="btn" dt:url="@{/export.xls}"></div>
</div>

<table id="myTableId" dt:table="true" dt:url="@{/persons}" dt:serverside="true" dt:processing="true" dt:export="pdf,xls" dt:dom="lEfrtiEp">
  ...
</table>

<datatables:table id="myTableId" url="/persons" serverSide="true" processing="true" export="csv">
  ...
  <datatables:export type="csv" cssClass="btn" url="/export.csv" />
</datatables:table>

<div dt:conf="myTableId">
  <div dt:confType="export" dt:type="csv" dt:cssClass="btn" dt:url="@{/export.csv}"></div>
</div>

<table id="myTableId" dt:table="true" dt:url="@{/persons}" dt:serverside="true" dt:processing="true" dt:export="csv">
  ...
</table>

<datatables:table id="myTableId" url="/persons" serverSide="true" processing="true" export="csv">
  ...
  <datatables:export type="csv" cssClass="btn" url="/export.csv" method="POST" />
</datatables:table>

<div dt:conf="myTableId"> (1)
  <div dt:confType="export" dt:type="csv" (2)
       dt:cssClass="btn"
       dt:url="@{/export.csv}"
       dt:label="Export using a HTTP POST"
       dt:method="post"></div> (3)
</div>

<table id="myTableId" (1)
       dt:table="true" dt:url="@{/persons}" dt:serverside="true" dt:processing="true"
       dt:export="csv">
  ...
</table>

package my.package;

public class MyExportClass implements DatatablesExport {

  private HtmlTable table;

  @Override
  public void initExport(HtmlTable table) {
    this.table = table;
    //  Some other stuff
  }

  @Override
  public void processExport(OutputStream output) throws ExportException {
    // Write anything inside the output using the HtmlTable instance
  }
}

{
   "assets": [{
      "locations": {
         "webapp": "/assets/js/custom.js"
      }
   }]
}

// Merge the desired option into the original object, recursively
$.extend( true, oTable_[tableId]_params, { "displayStart" : 50 } );

<datatables:table id="myTableId" ...>
  ...
  <datatables:extraJs bundles="custom" placeholder="before_start_document_ready" />  (1) (2)
</datatables:table>

<div dt:conf="myTableId">
  <div dt:confType="extrajs" dt:bundles="custom" placeholder="before_start_document_ready" />  (1) (2)
</div>

<table id="myTableId" dt:table="true" ...>
  ...
</table>

var oTable_myTableId;
var oTable_myTableId_params = {
  // all explicitely declared parameters and column definitions
};
// Merge the desired option into the original object, recursively
$.extend( true, oTable_myTableId_params, { "displayStart" : 50 } );
$(document).ready(function() {
  oTable_myTableId = $('#myTableId').DataTable(oTable_myTableId_params);
});

<datatables:table id="myTableId" data="${persons}" dom="l0frtip"> (3)
  ...
  <datatables:extraHtml uid="0" cssStyle="float:right; margin-left: 5px;"> (1)
    <a class="btn" onclick="alert('Click!');">My custom link</a> (2)
  </datatables:extraHtml>
</datatables:table>

<div dt:conf="myTableId"> (1)
  <div dt:confType="extrahtml" dt:uid="0" dt:cssStyle="float:right; margin-left: 5px;">  (2) (3)
    <a class="btn btn-info" onclick="alert('Click!');">My custom control</a> (4)
  </div>
</div>

<table id="myTableId" dt:table="true" dt:dom="l0frtip"> (5)
  ...
</table>

function createdRowCallback(row, data, dataIndex){
  // Make the fifth column bold
  $('td:eq(4)', row).css({ 'font-weight': 'bold' });
}

function drawCallback(settings){
  alert( 'DataTables has redrawn the table' );
}

function footerCallback(toot, data, start, end, display) {
  toot.getElementsByTagName('th')[0].innerHTML = "Starting index is " + start;
}

// Show large numbers with a ' separator
function formatNumberCallback(toFormat) {
  return toFormat.toString().replace(/\B(?=(\d{3})+(?!\d))/g, "'");
};

function headerCallback(thead, data, start, end, display) {
  thead.getElementsByTagName('th')[0].innerHTML = "Displaying " + (end - start) + " records";
}

function infoCallback (settings, start, end, max, total, pre) {
  return start + " to " + end;
}

function initCompleteCallback(settings, json) {
  alert( 'DataTables has finished its initialisation.' );
}

// Cancel the table draw if #test has a value of 1
function preDrawCallback( settings ) {
  if ( $('#test').val() == 1 ) {
    return false;
  }
}