File: demos/startbootstrap-sb-admin-2/bower_components/datatables-responsive/examples/child-rows/custom-renderer.xml

Recommend this page to a friend!
  Classes of Emmanuel Podvin   Blapy   demos/startbootstrap-sb-admin-2/bower_components/datatables-responsive/examples/child-rows/custom-renderer.xml   Download  
File: demos/startbootstrap-sb-admin-2/bower_components/datatables-responsive/examples/child-rows/custom-renderer.xml
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: Blapy
jQuery plugin to load linked pages using AJAX
Author: By
Last change: Update of demos/startbootstrap-sb-admin-2/bower_components/datatables-responsive/examples/child-rows/custom-renderer.xml
Date: 2 years ago
Size: 1,468 bytes
 

Contents

Class file image Download
<?xml version="1.0" encoding="UTF-8" ?> <dt-example table-type="html-wide" table-class="display nowrap" order="5"> <css lib="datatables responsive" /> <js lib="jquery datatables responsive"> <![CDATA[ $(document).ready(function() { $('#example').DataTable( { responsive: { details: { renderer: function ( api, rowIdx ) { // Select hidden columns for the given row var data = api.cells( rowIdx, ':hidden' ).eq(0).map( function ( cell ) { var header = $( api.column( cell.column ).header() ); return '<tr>'+ '<td>'+ header.text()+':'+ '</td> '+ '<td>'+ api.cell( cell ).data()+ '</td>'+ '</tr>'; } ).toArray().join(''); return data ? $('<table/>').append( data ) : false; } } } } ); } ); ]]> </js> <title lib="Responsive">Custom child row renderer</title> <info><![CDATA[ The child row's for a collapsed table in Responsive, by default, show a `-tag ul/li` list of the data from the hidden columns. The `r-init responsive.details.renderer` option provide the ability to create your own custom renderer. It is given two parameters: the DataTables API instance for the table and the row index to use. This example shows the `dt-api cells()` method being used to select the hidden columns and constructing a table of the data. You could refine the selector to select only certain columns, or show all columns, etc. ]]></info> </dt-example>