Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
HI,
 
I have ajax code for populate the datas dynamically with html tags.
 

 $.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 :
 
<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 4-Sep-12 20:27pm
dilzz1.2K
Edited 4-Sep-12 21:55pm
v2
Comments
Bryian Tan at 5-Sep-12 14:05pm
   
where is the JavaScript to search and sort?
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

I think your problem may be here:
xmlDoc = $.parseXML(json.d);
If you receive XML, parse XML. If you receive JSON, evaluate the JSON.
 
Hope this helps,
 
Pablo.
  Permalink  
Comments
dilzz at 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 at 5-Sep-12 7:23am
   
Then, I'm lost. Try the links in solution #2.
Good luck,
Pablo.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

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
  Permalink  

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

  Print Answers RSS
0 Maciej Los 590
1 OriginalGriff 535
2 CPallini 285
3 Peter Leow 185
4 RyanDev 161
0 OriginalGriff 5,784
1 Sergey Alexandrovich Kryukov 4,838
2 Peter Leow 3,009
3 Maciej Los 2,894
4 DamithSL 2,465


Advertise | Privacy | Mobile
Web02 | 2.8.140721.1 | Last Updated 5 Sep 2012
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100