Child rows (show extra / detailed information)

-
The DataTables API has a number of methods available for attaching child rows to a parent row in the DataTable. This can be used to show additional information about a row, useful for cases where you wish to convey more information about a row than there is space for in the host table.
The example below makes use of the row().childDT methods to firstly check if a row is already displayed, and if so hide it (row().child.hide()DT), otherwise show it (row().child.show()DT). The content of the child row is, in this example, defined by the formatDetails() function, but you would replace that with whatever you wanted to show the content required, possibly including, for example, an Ajax call to the server to obtain the extra information to show.
NamePositionOfficeSalary


Zorita SerranoSoftware EngineerSan Francisco$115,000
Zenaida FrankSoftware EngineerNew York$125,250
Yuri BerryChief Marketing Officer (CMO)New York$675,000
Vivian HarrellFinancial ControllerSan Francisco$452,500
Unity ButlerMarketing DesignerSan Francisco$85,675
Timothy MooneyOffice ManagerLondon$136,200
Tiger NixonSystem ArchitectEdinburgh$320,800
Thor WaltonDeveloperNew York$98,540
Tatyana FitzpatrickRegional DirectorLondon$385,750
Suki BurksDeveloperLondon$114,500
Other examples

Basic initialisation

Advanced initialisation

Styling

Data sources

API

Ajax

Server-side

Plug-ins

Comments

Post a Comment

Popular posts from this blog

Bootstrap Tags Input

-
Query plugin providing a Twitter Bootstrap user interface for managing tags Code on Github   Bootstrap 2.3.2   Download Examples Markup Just add  data-role="tagsinput"  to your input field to automatically change it to a tags input field. Amsterdam   Washington   Sydney   Beijing   Cairo   Show code statement returns $("input").val() "Amsterdam,Washington,Sydney,Beijing,Cairo" $("input").tagsinput('items') [ "Amsterdam" ,"Washington","Sydney","Beijing","Cairo"] True multi value Use a  <select multiple />  as your input element for a tags input, to gain true multivalue support. Instead of a comma separated string, the values will be set in an array. Existing <option />  elements will automatically be set as tags. This makes it also possible to create tags containing a comma.                 Amsterdam      ...
Read more

Eloqent Usage

-
<?php /* |-------------------------------------------------------------------------- | Return a Collection of Objects |-------------------------------------------------------------------------- */ // collection of all users $sql = " select * from users " ; $users = User :: all(); $users = User :: get(); // name and email of all users $sql = " select name, email from users " ; $attributes = [ ' name ' , ' email ' ]; $users = User :: get( $attributes ); // collection of all users filtered by where clause $sql = " select * from users where active = 1 " ; $users = User :: where( ' active ' , 1 ) -> get(); $users = User :: where( ' name ' , ' like ' , ' J% ' ) -> get(); // collection of all users filtered by multiple where clauses $sql = " select * from users where act...
Read more