没有在分页时被取消选择 - 数据表
didn't get deselected on pagination - Datatable
我有一个包含 select 所有选项的数据表。我的数据表包含文件和链接。我需要 select 只有行包含文件。 selected 计数显示在那里。我的代码在
下面
var mydata = $('#document-table').DataTable({
"dom": 'Bfrtip',
"info": false,
"pageLength": 20,
"searching": false,
"lengthChange": false,
"select": {
'style': 'multi',
'selector': 'tr:not(.no-select)'
},
"rowCallback": function( row, data, index ){
if(data[2] == ''){
$('td:eq(0)', row).removeClass('select-checkbox');
$(row).addClass('no-select');
}
else {
$(row).removeClass('no-select');
}
},
"columnDefs": [
{
'targets': 0,
'checkboxes': {
'selectRow': true
},
'render': function(){
return '';
}
},
],
"order": [[ 1, 'asc' ]],
});
mydata.on("click", "th.select-checkbox", function() {
if ($("th.select-checkbox").hasClass("selected")) {
mydata.rows().deselect();
$("th.select-checkbox").removeClass("selected");
} else {
mydata.rows().select();
$("th.select-checkbox").addClass("selected");
}
}).on("select deselect", function() {
var count = mydata.rows({
selected: true
}).count();
if (count !== mydata.rows().count()) {
$("th.select-checkbox").removeClass("selected");
} else {
$("th.select-checkbox").addClass("selected");
}
mydata.rows('tr.no-select').deselect();
});
当我单击 select 全部按钮时，我需要使用 class '.no-select' 取消 select 每一行。我的代码适用于第一页。但在其他页面中，所有行都是 selected 。我该如何解决这个问题？
我们可以更改回调选项，
来自
"rowCallback"
进入这个
"createdRow"
根据文档，rowCallback 在行节点呈现到文档之前触发，createdRow 在行节点插入到 DOM 之后触发。
Link: rowCallback , createdRow
然后使用 $() api 在单击事件的 select-all 复选框内的完整 table 上执行 Jquery 选择操作。
The selector given to the $() method will be run on all of the tr
elements in the table, and their descendent elements, with the found
elements being returned as a jQuery object.
link: $()
您可以像这样过滤选择器
tr:not(.no-select)
进入这个
table
.DataTable()
.$('tr:not(.no-select)')
.toggleClass("selected",this.checked);
不太完美，请根据您的要求查看下面的示例。
Example of empty 2nd column is on page 1 and 4
var mydata = $(document).ready(function() {
$('#example').DataTable( {
"dom": 'Bfrtip',
"info": false,
"searching": false,
"lengthChange": false,
"createdRow": function( row, data, index ){
if(data[2] == ''){
$('td:eq(0)', row).removeClass('select-checkbox');
$(row).addClass('no-select');
}
else {
$(row).removeClass('no-select');
}
},
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'multi',
selector: 'tr:not(.no-select)'
},
order: [[ 1, 'asc' ]]
} );
} )
mydata.on("click", "th.select-checkbox input", function() {
var table = $(this).closest('table');
//update botton checkbox
table.find('th.select-checkbox input').prop('checked', this.checked);
//update all data across all pages
table
.DataTable()
.$('tr:not(.no-select)')
.toggleClass("selected",this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css" rel="stylesheet" />
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th class="select-checkbox"><input type="checkbox"></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>0,800</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>0,750</td>
</tr>
<tr>
<td></td>
<td>Ashton Cox</td>
<td></td>
<td>San Francisco</td>
<td>66</td>
<td>,000</td>
</tr>
<tr>
<td></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>3,060</td>
</tr>
<tr>
<td></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2,700</td>
</tr>
<tr>
<td></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2,000</td>
</tr>
<tr>
<td></td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>7,500</td>
</tr>
<tr>
<td></td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>7,900</td>
</tr>
<tr>
<td></td>
<td>Colleen Hurst</td>
<td></td>
<td>San Francisco</td>
<td>39</td>
<td>5,500</td>
</tr>
<tr>
<td></td>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>3,600</td>
</tr>
<tr>
<td></td>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>,560</td>
</tr>
<tr>
<td></td>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2,000</td>
</tr>
<tr>
<td></td>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>0,600</td>
</tr>
<tr>
<td></td>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>3,500</td>
</tr>
<tr>
<td></td>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>5,750</td>
</tr>
<tr>
<td></td>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>8,500</td>
</tr>
<tr>
<td></td>
<td>Paul Byrd</td>
<td></td>
<td>New York</td>
<td>64</td>
<td>5,000</td>
</tr>
<tr>
<td></td>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>7,500</td>
</tr>
<tr>
<td></td>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2,000</td>
</tr>
<tr>
<td></td>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>7,500</td>
</tr>
<tr>
<td></td>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>5,000</td>
</tr>
<tr>
<td></td>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>5,000</td>
</tr>
<tr>
<td></td>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>6,450</td>
</tr>
<tr>
<td></td>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>,600</td>
</tr>
<tr>
<td></td>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>,200,000</td>
</tr>
<tr>
<td></td>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>,575</td>
</tr>
<tr>
<td></td>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>7,650</td>
</tr>
<tr>
<td></td>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>6,850</td>
</tr>
<tr>
<td></td>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>0,000</td>
</tr>
<tr>
<td></td>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>3,000</td>
</tr>
<tr>
<td></td>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>,400</td>
</tr>
<tr>
<td></td>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>4,500</td>
</tr>
<tr>
<td></td>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>5,000</td>
</tr>
<tr>
<td></td>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>5,500</td>
</tr>
<tr>
<td></td>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>4,050</td>
</tr>
<tr>
<td></td>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>,675</td>
</tr>
<tr>
<td></td>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>4,500</td>
</tr>
<tr>
<td></td>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>9,850</td>
</tr>
<tr>
<td></td>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2,500</td>
</tr>
<tr>
<td></td>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>6,200</td>
</tr>
<tr>
<td></td>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>5,750</td>
</tr>
<tr>
<td></td>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>4,500</td>
</tr>
<tr>
<td></td>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>3,500</td>
</tr>
<tr>
<td></td>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>9,575</td>
</tr>
<tr>
<td></td>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>,540</td>
</tr>
<tr>
<td></td>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>,500</td>
</tr>
<tr>
<td></td>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>8,575</td>
</tr>
<tr>
<td></td>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>5,250</td>
</tr>
<tr>
<td></td>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>5,000</td>
</tr>
<tr>
<td></td>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>,650</td>
</tr>
<tr>
<td></td>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>5,600</td>
</tr>
<tr>
<td></td>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>6,250</td>
</tr>
<tr>
<td></td>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>3,500</td>
</tr>
<tr>
<td></td>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>,500</td>
</tr>
<tr>
<td></td>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>3,000</td>
</tr>
<tr>
<td></td>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>3,000</td>
</tr>
<tr>
<td></td>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="select-checkbox"><input type="checkbox"></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
我有一个包含 select 所有选项的数据表。我的数据表包含文件和链接。我需要 select 只有行包含文件。 selected 计数显示在那里。我的代码在
下面var mydata = $('#document-table').DataTable({
"dom": 'Bfrtip',
"info": false,
"pageLength": 20,
"searching": false,
"lengthChange": false,
"select": {
'style': 'multi',
'selector': 'tr:not(.no-select)'
},
"rowCallback": function( row, data, index ){
if(data[2] == ''){
$('td:eq(0)', row).removeClass('select-checkbox');
$(row).addClass('no-select');
}
else {
$(row).removeClass('no-select');
}
},
"columnDefs": [
{
'targets': 0,
'checkboxes': {
'selectRow': true
},
'render': function(){
return '';
}
},
],
"order": [[ 1, 'asc' ]],
});
mydata.on("click", "th.select-checkbox", function() {
if ($("th.select-checkbox").hasClass("selected")) {
mydata.rows().deselect();
$("th.select-checkbox").removeClass("selected");
} else {
mydata.rows().select();
$("th.select-checkbox").addClass("selected");
}
}).on("select deselect", function() {
var count = mydata.rows({
selected: true
}).count();
if (count !== mydata.rows().count()) {
$("th.select-checkbox").removeClass("selected");
} else {
$("th.select-checkbox").addClass("selected");
}
mydata.rows('tr.no-select').deselect();
});
当我单击 select 全部按钮时，我需要使用 class '.no-select' 取消 select 每一行。我的代码适用于第一页。但在其他页面中，所有行都是 selected 。我该如何解决这个问题？
我们可以更改回调选项，
来自
"rowCallback"
进入这个
"createdRow"
根据文档，rowCallback 在行节点呈现到文档之前触发，createdRow 在行节点插入到 DOM 之后触发。
Link: rowCallback , createdRow
然后使用 $() api 在单击事件的 select-all 复选框内的完整 table 上执行 Jquery 选择操作。
The selector given to the $() method will be run on all of the tr elements in the table, and their descendent elements, with the found elements being returned as a jQuery object.
link: $()
您可以像这样过滤选择器
tr:not(.no-select)
进入这个
table
.DataTable()
.$('tr:not(.no-select)')
.toggleClass("selected",this.checked);
不太完美，请根据您的要求查看下面的示例。
Example of empty 2nd column is on page 1 and 4
var mydata = $(document).ready(function() {
$('#example').DataTable( {
"dom": 'Bfrtip',
"info": false,
"searching": false,
"lengthChange": false,
"createdRow": function( row, data, index ){
if(data[2] == ''){
$('td:eq(0)', row).removeClass('select-checkbox');
$(row).addClass('no-select');
}
else {
$(row).removeClass('no-select');
}
},
columnDefs: [ {
orderable: false,
className: 'select-checkbox',
targets: 0
} ],
select: {
style: 'multi',
selector: 'tr:not(.no-select)'
},
order: [[ 1, 'asc' ]]
} );
} )
mydata.on("click", "th.select-checkbox input", function() {
var table = $(this).closest('table');
//update botton checkbox
table.find('th.select-checkbox input').prop('checked', this.checked);
//update all data across all pages
table
.DataTable()
.$('tr:not(.no-select)')
.toggleClass("selected",this.checked);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/select/1.3.0/css/select.dataTables.min.css" rel="stylesheet" />
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th class="select-checkbox"><input type="checkbox"></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>0,800</td>
</tr>
<tr>
<td></td>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>0,750</td>
</tr>
<tr>
<td></td>
<td>Ashton Cox</td>
<td></td>
<td>San Francisco</td>
<td>66</td>
<td>,000</td>
</tr>
<tr>
<td></td>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
<td>3,060</td>
</tr>
<tr>
<td></td>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>33</td>
<td>2,700</td>
</tr>
<tr>
<td></td>
<td>Brielle Williamson</td>
<td>Integration Specialist</td>
<td>New York</td>
<td>61</td>
<td>2,000</td>
</tr>
<tr>
<td></td>
<td>Herrod Chandler</td>
<td>Sales Assistant</td>
<td>San Francisco</td>
<td>59</td>
<td>7,500</td>
</tr>
<tr>
<td></td>
<td>Rhona Davidson</td>
<td>Integration Specialist</td>
<td>Tokyo</td>
<td>55</td>
<td>7,900</td>
</tr>
<tr>
<td></td>
<td>Colleen Hurst</td>
<td></td>
<td>San Francisco</td>
<td>39</td>
<td>5,500</td>
</tr>
<tr>
<td></td>
<td>Sonya Frost</td>
<td>Software Engineer</td>
<td>Edinburgh</td>
<td>23</td>
<td>3,600</td>
</tr>
<tr>
<td></td>
<td>Jena Gaines</td>
<td>Office Manager</td>
<td>London</td>
<td>30</td>
<td>,560</td>
</tr>
<tr>
<td></td>
<td>Quinn Flynn</td>
<td>Support Lead</td>
<td>Edinburgh</td>
<td>22</td>
<td>2,000</td>
</tr>
<tr>
<td></td>
<td>Charde Marshall</td>
<td>Regional Director</td>
<td>San Francisco</td>
<td>36</td>
<td>0,600</td>
</tr>
<tr>
<td></td>
<td>Haley Kennedy</td>
<td>Senior Marketing Designer</td>
<td>London</td>
<td>43</td>
<td>3,500</td>
</tr>
<tr>
<td></td>
<td>Tatyana Fitzpatrick</td>
<td>Regional Director</td>
<td>London</td>
<td>19</td>
<td>5,750</td>
</tr>
<tr>
<td></td>
<td>Michael Silva</td>
<td>Marketing Designer</td>
<td>London</td>
<td>66</td>
<td>8,500</td>
</tr>
<tr>
<td></td>
<td>Paul Byrd</td>
<td></td>
<td>New York</td>
<td>64</td>
<td>5,000</td>
</tr>
<tr>
<td></td>
<td>Gloria Little</td>
<td>Systems Administrator</td>
<td>New York</td>
<td>59</td>
<td>7,500</td>
</tr>
<tr>
<td></td>
<td>Bradley Greer</td>
<td>Software Engineer</td>
<td>London</td>
<td>41</td>
<td>2,000</td>
</tr>
<tr>
<td></td>
<td>Dai Rios</td>
<td>Personnel Lead</td>
<td>Edinburgh</td>
<td>35</td>
<td>7,500</td>
</tr>
<tr>
<td></td>
<td>Jenette Caldwell</td>
<td>Development Lead</td>
<td>New York</td>
<td>30</td>
<td>5,000</td>
</tr>
<tr>
<td></td>
<td>Yuri Berry</td>
<td>Chief Marketing Officer (CMO)</td>
<td>New York</td>
<td>40</td>
<td>5,000</td>
</tr>
<tr>
<td></td>
<td>Caesar Vance</td>
<td>Pre-Sales Support</td>
<td>New York</td>
<td>21</td>
<td>6,450</td>
</tr>
<tr>
<td></td>
<td>Doris Wilder</td>
<td>Sales Assistant</td>
<td>Sidney</td>
<td>23</td>
<td>,600</td>
</tr>
<tr>
<td></td>
<td>Angelica Ramos</td>
<td>Chief Executive Officer (CEO)</td>
<td>London</td>
<td>47</td>
<td>,200,000</td>
</tr>
<tr>
<td></td>
<td>Gavin Joyce</td>
<td>Developer</td>
<td>Edinburgh</td>
<td>42</td>
<td>,575</td>
</tr>
<tr>
<td></td>
<td>Jennifer Chang</td>
<td>Regional Director</td>
<td>Singapore</td>
<td>28</td>
<td>7,650</td>
</tr>
<tr>
<td></td>
<td>Brenden Wagner</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>28</td>
<td>6,850</td>
</tr>
<tr>
<td></td>
<td>Fiona Green</td>
<td>Chief Operating Officer (COO)</td>
<td>San Francisco</td>
<td>48</td>
<td>0,000</td>
</tr>
<tr>
<td></td>
<td>Shou Itou</td>
<td>Regional Marketing</td>
<td>Tokyo</td>
<td>20</td>
<td>3,000</td>
</tr>
<tr>
<td></td>
<td>Michelle House</td>
<td>Integration Specialist</td>
<td>Sidney</td>
<td>37</td>
<td>,400</td>
</tr>
<tr>
<td></td>
<td>Suki Burks</td>
<td>Developer</td>
<td>London</td>
<td>53</td>
<td>4,500</td>
</tr>
<tr>
<td></td>
<td>Prescott Bartlett</td>
<td>Technical Author</td>
<td>London</td>
<td>27</td>
<td>5,000</td>
</tr>
<tr>
<td></td>
<td>Gavin Cortez</td>
<td>Team Leader</td>
<td>San Francisco</td>
<td>22</td>
<td>5,500</td>
</tr>
<tr>
<td></td>
<td>Martena Mccray</td>
<td>Post-Sales support</td>
<td>Edinburgh</td>
<td>46</td>
<td>4,050</td>
</tr>
<tr>
<td></td>
<td>Unity Butler</td>
<td>Marketing Designer</td>
<td>San Francisco</td>
<td>47</td>
<td>,675</td>
</tr>
<tr>
<td></td>
<td>Howard Hatfield</td>
<td>Office Manager</td>
<td>San Francisco</td>
<td>51</td>
<td>4,500</td>
</tr>
<tr>
<td></td>
<td>Hope Fuentes</td>
<td>Secretary</td>
<td>San Francisco</td>
<td>41</td>
<td>9,850</td>
</tr>
<tr>
<td></td>
<td>Vivian Harrell</td>
<td>Financial Controller</td>
<td>San Francisco</td>
<td>62</td>
<td>2,500</td>
</tr>
<tr>
<td></td>
<td>Timothy Mooney</td>
<td>Office Manager</td>
<td>London</td>
<td>37</td>
<td>6,200</td>
</tr>
<tr>
<td></td>
<td>Jackson Bradshaw</td>
<td>Director</td>
<td>New York</td>
<td>65</td>
<td>5,750</td>
</tr>
<tr>
<td></td>
<td>Olivia Liang</td>
<td>Support Engineer</td>
<td>Singapore</td>
<td>64</td>
<td>4,500</td>
</tr>
<tr>
<td></td>
<td>Bruno Nash</td>
<td>Software Engineer</td>
<td>London</td>
<td>38</td>
<td>3,500</td>
</tr>
<tr>
<td></td>
<td>Sakura Yamamoto</td>
<td>Support Engineer</td>
<td>Tokyo</td>
<td>37</td>
<td>9,575</td>
</tr>
<tr>
<td></td>
<td>Thor Walton</td>
<td>Developer</td>
<td>New York</td>
<td>61</td>
<td>,540</td>
</tr>
<tr>
<td></td>
<td>Finn Camacho</td>
<td>Support Engineer</td>
<td>San Francisco</td>
<td>47</td>
<td>,500</td>
</tr>
<tr>
<td></td>
<td>Serge Baldwin</td>
<td>Data Coordinator</td>
<td>Singapore</td>
<td>64</td>
<td>8,575</td>
</tr>
<tr>
<td></td>
<td>Zenaida Frank</td>
<td>Software Engineer</td>
<td>New York</td>
<td>63</td>
<td>5,250</td>
</tr>
<tr>
<td></td>
<td>Zorita Serrano</td>
<td>Software Engineer</td>
<td>San Francisco</td>
<td>56</td>
<td>5,000</td>
</tr>
<tr>
<td></td>
<td>Jennifer Acosta</td>
<td>Junior Javascript Developer</td>
<td>Edinburgh</td>
<td>43</td>
<td>,650</td>
</tr>
<tr>
<td></td>
<td>Cara Stevens</td>
<td>Sales Assistant</td>
<td>New York</td>
<td>46</td>
<td>5,600</td>
</tr>
<tr>
<td></td>
<td>Hermione Butler</td>
<td>Regional Director</td>
<td>London</td>
<td>47</td>
<td>6,250</td>
</tr>
<tr>
<td></td>
<td>Lael Greer</td>
<td>Systems Administrator</td>
<td>London</td>
<td>21</td>
<td>3,500</td>
</tr>
<tr>
<td></td>
<td>Jonas Alexander</td>
<td>Developer</td>
<td>San Francisco</td>
<td>30</td>
<td>,500</td>
</tr>
<tr>
<td></td>
<td>Shad Decker</td>
<td>Regional Director</td>
<td>Edinburgh</td>
<td>51</td>
<td>3,000</td>
</tr>
<tr>
<td></td>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>3,000</td>
</tr>
<tr>
<td></td>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2,000</td>
</tr>
</tbody>
<tfoot>
<tr>
<th class="select-checkbox"><input type="checkbox"></th>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</tfoot>
</table>