it works in first case but not in second , pls tel me why

2. <table id="example" class="display" style="width:100%">
3.         <thead>
4.             <tr>
5.                 <th>Name</th>
6.                 <th>Position</th>
7.                 <th>Office</th>
8.                 <th>Age</th>
9.                 <th>Start date</th>
10.                 <th>Salary</th>
11.             </tr>
12.         </thead>
13.         <tbody>
14.             <tr>
15.                 <td>Tiger Nixon</td>
16.                 <td>System Architect</td>
17.                 <td>Edinburgh</td>
18.                 <td>61</td>
19.                 <td>2011/04/25</td>
20.                 <td>$320,800</td>
21.             </tr>
23. </tbody>
24.                                     </table>
25. // then in js file
26.  var table12 = $('#example').DataTable();
27.    table12.page(1).draw(true);  // works
28. // but in below case it does not
29.  <table id="tblReport1" class="display" style="width:100%"><thead></thead><tbody></tbody></table>
30. 
    
31. // in js file
33. 
    
34.     var dd = [
35.         {
36.             "name": "Tiger Nixon",
37.             "position": "System Architect",
38.             "salary": "$3,120"
39.         }
40.     ];
41.     var table111 = $('#tblReport1').dataTable({
42.         "data": dd
43.         ,
44.         "columns": [
45.             { "data": "name" },
46.             { "data": "position" },
47.             { "data":"salary"}
48.         ]
49.     });
50.     table111.page(1).draw(true); // does not work
51.