Bind both the table inside the Div using Knockoutjs

Question

Hi,

 

I have a requirement to show the employees department wise like below;

 

Department: Developers                                                                  Count:3
EmpID	Name	Salary	Action
101	AAAAA	10000	some buttons
102	BBBBB	15000
103	CCCCC	10000

 

Department:Finance                                                                         Count:2
EmpID	Name	Salary	Action
104	xxxxx	10000	some buttons
105	yyyyyy	15000

 

For the above requirement I designed  my View like below

 

<div data-bind="foreach: Departments">

 <span class="pull-left" data-bind="text: DeptName"></span>

<span class="pull-right" data-bind="text: Count"></span> 

<table>

<thead>

<tr>

<th>EmpID</th>

<th>Name</th>

<th>Salary</th>

<th>Action</th>

</tr>

</thead>

<tbody data-bind="foreach: Employees">

<tr>

<td>

<span data-bind="text: EmpID"></span>

</td>

<td>

<span data-bind="text: Name"></span>

</td>

<td>

<span data-bind="text: Salary"></span>

</td>

<td>

<button type="submit" value="View"></button>

</td>

</tr>

</tbody>

</table>

</div> 

 

Can somebody help with the knockout code. How to bind the data to Div and Table inside in it.

 

Thanks in Advance

Murali Krishna.