How to show different tables in a single window when clicking on a link in EasyUI?

Good day!
Have such code:



<title>Title</title>



 <div class="easyui-layout" style="width:800px;height:400px;">
 <div region="west" split="true" title="Left" style="width:150px;">
 <p style="padding:5px;margin:0;">Select:</p>
the <ul>
 the <li><a href="javascript:void(0)" onclick="show_dg1()">Table 1</a></li>
 the <li><a href="javascript:void(0)" onclick="show_dg2()">Table 2</a></li>
 the <li><a href="javascript:void(0)" onclick="show_dg3()">Table 3</a></li>
</ul>
</div>
 <div id="content" region="center" title="Center" style="padding:5px;"></div>
</div>


 <script type="text/javascript">
 create_datagrid_1 function() {
$('#grid_1').datagrid({
 url: "some url",
 title: 'Table1',
 singleSelect: 'true',
 columns: [[
 {field: 'id', title: 'ID', width : 100},
 {field: 'Name', title: 'Name', width : 100, sortable:true}
]]
});
}

 create_datagrid_2 function() {
$('#grid_2').datagrid({
 url: "some url",
 title: 'Table2',
 singleSelect: 'true',
 columns: [[
 {field: 'id', title: 'ID', width : 100},
 {field: 'name, title: 'Name', width : 100, sortable:true}
]]
});
}

 create_datagrid_3 function() {
$('#grid_3').datagrid({
 url: "some url",
 title: 'Table3',
 singleSelect: 'true',
 columns: [[
 {field: 'id', title: 'ID', width : 100},
 {field: 'Name', title: 'Name', width : 100, sortable:true}
]]
});
}
</script>


It is necessary that by clicking on the link to display the corresponding tables. How can I do that? Or it is better to use another element?
July 8th 19 at 15:22
0 answer

Find more questions by tags JavaScript