FixedHeader example Multiple tables

The following example shows two DataTables enhanced tables both with FixedHeader enabled on them. This is done simply by initialising FixedHeader on each table. This example also shows the footer being fixed in place for the two tables.

Show entries

Search:

Name	Position	Office	Age	Salary
Name	Position	Office	Age	Salary
Cedric Kelly	Senior Javascript Developer	Edinburgh	22	$433,060
Dai Rios	Personnel Lead	Edinburgh	35	$217,500
Gavin Joyce	Developer	Edinburgh	42	$92,575
Jennifer Acosta	Junior Javascript Developer	Edinburgh	43	$75,650
Martena Mccray	Post-Sales support	Edinburgh	46	$324,050
Quinn Flynn	Support Lead	Edinburgh	22	$342,000
Shad Decker	Regional Director	Edinburgh	51	$183,000
Sonya Frost	Software Engineer	Edinburgh	23	$103,600
Tiger Nixon	System Architect	Edinburgh	61	$320,800

Showing 1 to 9 of 9 entries

Previous1Next

Show entries

Search:

Name	Position	Office	Age	Salary
Name	Position	Office	Age	Salary
Angelica Ramos	Chief Executive Officer (CEO)	London	47	$1,200,000
Bradley Greer	Software Engineer	London	41	$132,000
Bruno Nash	Software Engineer	London	38	$163,500
Haley Kennedy	Senior Marketing Designer	London	43	$313,500
Hermione Butler	Regional Director	London	47	$356,250
Jena Gaines	Office Manager	London	30	$90,560
Lael Greer	Systems Administrator	London	21	$103,500
Michael Silva	Marketing Designer	London	66	$198,500
Prescott Bartlett	Technical Author	London	27	$145,000
Suki Burks	Developer	London	53	$114,500

Showing 1 to 10 of 12 entries

Previous1 2Next

Javascript
HTML
CSS
Ajax
Server-side script

The Javascript shown below is used to initialise the table shown in this example:

$(document).ready(function() {
    var t1 = $('table.display').eq(0).DataTable();
    new $.fn.dataTable.FixedHeader( t1, {
        bottom: true
    } );
 
    var t2 = $('table.display').eq(1).DataTable();
    new $.fn.dataTable.FixedHeader( t2, {
        bottom: true
    } );
} );

In addition to the above code, the following Javascript library files are loaded for use in this example:

The HTML shown below is the raw HTML table element, before it has been enhanced by DataTables:

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

<table id="" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead>
 
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </tfoot>
 
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>$320,800</td>
        </tr>
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>$433,060</td>
        </tr>
        <tr>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td>$103,600</td>
        </tr>
        <tr>
            <td>Quinn Flynn</td>
            <td>Support Lead</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td>$342,000</td>
        </tr>
        <tr>
            <td>Dai Rios</td>
            <td>Personnel Lead</td>
            <td>Edinburgh</td>
            <td>35</td>
            <td>$217,500</td>
        </tr>
        <tr>
            <td>Gavin Joyce</td>
            <td>Developer</td>
            <td>Edinburgh</td>
            <td>42</td>
            <td>$92,575</td>
        </tr>
        <tr>
            <td>Martena Mccray</td>
            <td>Post-Sales support</td>
            <td>Edinburgh</td>
            <td>46</td>
            <td>$324,050</td>
        </tr>
        <tr>
            <td>Jennifer Acosta</td>
            <td>Junior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>43</td>
            <td>$75,650</td>
        </tr>
        <tr>
            <td>Shad Decker</td>
            <td>Regional Director</td>
            <td>Edinburgh</td>
            <td>51</td>
            <td>$183,000</td>
        </tr>
    </tbody>
</table><table id="" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </thead>
 
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Salary</th>
        </tr>
    </tfoot>
 
    <tbody>
        <tr>
            <td>Jena Gaines</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>30</td>
            <td>$90,560</td>
        </tr>
        <tr>
            <td>Haley Kennedy</td>
            <td>Senior Marketing Designer</td>
            <td>London</td>
            <td>43</td>
            <td>$313,500</td>
        </tr>
        <tr>
            <td>Tatyana Fitzpatrick</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>19</td>
            <td>$385,750</td>
        </tr>
        <tr>
            <td>Michael Silva</td>
            <td>Marketing Designer</td>
            <td>London</td>
            <td>66</td>
            <td>$198,500</td>
        </tr>
        <tr>
            <td>Bradley Greer</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>41</td>
            <td>$132,000</td>
        </tr>
        <tr>
            <td>Angelica Ramos</td>
            <td>Chief Executive Officer (CEO)</td>
            <td>London</td>
            <td>47</td>
            <td>$1,200,000</td>
        </tr>
        <tr>
            <td>Suki Burks</td>
            <td>Developer</td>
            <td>London</td>
            <td>53</td>
            <td>$114,500</td>
        </tr>
        <tr>
            <td>Prescott Bartlett</td>
            <td>Technical Author</td>
            <td>London</td>
            <td>27</td>
            <td>$145,000</td>
        </tr>
        <tr>
            <td>Timothy Mooney</td>
            <td>Office Manager</td>
            <td>London</td>
            <td>37</td>
            <td>$136,200</td>
        </tr>
        <tr>
            <td>Bruno Nash</td>
            <td>Software Engineer</td>
            <td>London</td>
            <td>38</td>
            <td>$163,500</td>
        </tr>
        <tr>
            <td>Hermione Butler</td>
            <td>Regional Director</td>
            <td>London</td>
            <td>47</td>
            <td>$356,250</td>
        </tr>
        <tr>
            <td>Lael Greer</td>
            <td>Systems Administrator</td>
            <td>London</td>
            <td>21</td>
            <td>$103,500</td>
        </tr>
    </tbody>
</table>

FixedHeader example Multiple tables

Other examples

Examples