Link to home
Start Free TrialLog in
Avatar of ITsolutionWizard
ITsolutionWizardFlag for United States of America

asked on

Jquery with datatable XML

I use https://datatables.net/ on my MVC project. The front end is pure HTML5.
When the page is load, I can see all information show on <tbody id="bondListing"> and have no issue.
However, when I try to sort on the column, and make paging in the drop down from e.g. 10 to 100.
All of the data inside of <tbody id="bondListing"> are disappeared.

Do you know how to fix it?

<div class="table-responsive">
                       
                        <table  class="table" id="table1" name="table1">
                            <thead>
                                <tr>
                                    <th>State</th>
                                    <th>Name</th>
                                    <th>Code</th>
                                 </tr>
                            </thead>
                            <tbody id="bondListing">

                            </tbody>
                        </table>
                    </div>
<script>
    window.onload = function () {
        fnGetBondNameList();
    };
function fnGetBondNameList() {
             $.ajax({
                url: "http://localhost:5489/BondList.xml",
                success: function (xml) {
                  parseSelectXML(xml,"bondListing","Bond","CA");
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    alert("Status: " + xhr.status);
                    alert("Error: " + thrownError);
                }
            });
}
function parseSelectXML(xml, selectid, xmlnode, bondState) {
    //var selecthtml = '<option>Choose One</option>';
    var selecthtml = '';
    var values = new Array();
    $(xml).find(xmlnode).each(function () {
        if (bondState == $(this).find('GeneralInformation').find('State').text()) {
            values.push(
                "<tr><td>" + $(this).find('GeneralInformation').find('State').text() + "</td><td>" + $(this).find('GeneralInformation').find('Name').text() + "</td><td>" + $(this).find('GeneralInformation').find('Code').text() + "</td></tr>"
                );
        }
    });
    $.each(values.sort(), function (i, v) {
        selecthtml +=v;
    });//alert(selecthtml);
    $('#' + selectid).html(selecthtml);
}
</script>

Open in new window

Avatar of ITsolutionWizard
ITsolutionWizard
Flag of United States of America image

ASKER

Help?
ASKER CERTIFIED SOLUTION
Avatar of lenamtl
lenamtl
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial