Click here to Skip to main content
15,886,578 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
HI,

I have ajax code for populate the datas dynamically with html tags.


JavaScript
$.ajax(
               {
                   type: "POST",
                   url: "../../GeneralService.asmx/Get_Bill_Desk_Items",
                   dataType: "json",
                   data: {},
                   contentType: "application/json; charset=utf-8",
                   success: function (json) {

                       var xmlDoc = "";
                       var xml = "";
                       xmlDoc = $.parseXML(json.d);
                       xml = $(xmlDoc);

                       document.getElementById("PopulateBillDeskItems").innerHTML = "";

                       $(xml).find("Table").each(function () {
                           var Category = $(this).find("Category").text();
                           var Table_Room_Code = $(this).find("Table_Room_Code").text();
                           var Table_Room_No = $(this).find("Table_Room_No").text();
                           var Item_Total = $(this).find("Item_Total").text();

                           $("#PopulateBillDeskItems").append(" <tr class='gradeX'><td>" + Category + "</td><td>" + Table_Room_Code + "</td><td>" + Table_Room_No + "</td><td class='center'>" + Item_Total + "</td></tr>");

                       });
                   }
                       });


And in the HTML Page :

HTML
<table id="table-example" class="table">
		   <thead>
		      <tr>
			<th>Category</th>
			<th>Table-Room Code</th>
			<th>Table-Room NO</th>
			<th>Total AMT</th>
		      </tr>
		   </thead>

		  <tbody id ="PopulateBillDeskItems"></tbody>

	      </table>



This code is working fine... But When i go to the page source the HTML code is not populated.but the design side i can see the changes.

And what is my need is,

I have a javascript css Table, And in that table i have populated the datas dynamically using the above code.

And in that table there is search and sort option.
But when i populate datas dynamically using the above code, The search and sort option is not working.

But when i hard-code the datas to that table then the search and sort option is working fine.

Please help me...

Thanks
Dileep..
Posted
Updated 4-Sep-12 21:55pm
v2
Comments
Bryian Tan 5-Sep-12 14:05pm    
where is the JavaScript to search and sort?

I think your problem may be here:
JavaScript
xmlDoc = $.parseXML(json.d);

If you receive XML, parse XML. If you receive JSON, evaluate the JSON.

Hope this helps,

Pablo.
 
Share this answer
 
Comments
dilzz 5-Sep-12 6:57am    
Sir, Actually these are all working fine... i think the code is not generated in the page source. But i can see the code in Inspect Element.
Pablo Aliskevicius 5-Sep-12 7:23am    
Then, I'm lost. Try the links in solution #2.
Good luck,
Pablo.
There are many similar articles for that. Refer the links below:
Table sorter[^]
HTML TABLE Sorting[^]
Filtering or searching an HTML table using JavaScript[^]
JavaScript sort table[^]
33 JavaScript Solutions for Sorting Tables[^]



All the best.
--Amit
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900