Integrate with Sharepoint 2013 App (JSOM)

[CampbellNash]

I've managed to Dynatable into the SP2013 app I'm building and whilst the HTML table is being "Dynafied" I'm seeing all the records (252) and when I click the link to sort the column the data disappears.

Would this be something to do with how SP is bring back the data? I'm using JSOM to present the data.

[JangoSteve]

I'm not really sure. It'd help to see what your HTML, JS, and collection data from SharePoint looks like.

[CampbellNash]

kinda difficult...but the JS is as follows...

    // This function shows Country Limits table
    function readCountries() {

    $('#countries').show();
    // Let dynatable do its magic.
    $('#tblCountries').dynatable();
    var rptCountries = document.getElementById("countryListRow");
    rptCountryList = web.get_lists().getByTitle('CountriesLimits');
    var camlQuery = SP.CamlQuery.createAllItemsQuery();
    var rptCountryListItems = rptCountryList.getItems(camlQuery);
    context.load(rptCountryListItems);
    context.executeQueryAsync(

        function () {
            // Success returned from executeQueryAsync

            if (rptCountryListItems.get_count() > 0) {
                var rptCountryListItemEnumerator1 = rptCountryListItems.getEnumerator();

                // Lets get the select items
                while (rptCountryListItemEnumerator1.moveNext()) {
                    var rptCountryListItem1 = rptCountryListItemEnumerator1.get_current();
                    rptCountries.innerHTML += "<tr><td>" + rptCountryListItem1.get_id() + "</td>" +
                "<td>" + rptCountryListItem1.get_item("Title") + "</td>" +
                "<td>" + rptCountryListItem1.get_item("GiftLimit") + "</td>" +
                "<td>" + rptCountryListItem1.get_item("HospitalityLimit") + "</td></tr>";

                }
            }
            else { alert("There are no Countries setup. Add some now"); }
        },
        function (sender, args) {
            // Failure returned from executeQueryAsync
            alert("Error in Populating Business Units: " + args.get_message());
        }
        );


    }

and the HTML

<table class="table table-striped" id="tblCountries">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>Country</th>
                                    <th>Gift Limit</th>
                                    <th>Hospitality Limit</th>
                                </tr>
                            </thead>
                            <tbody id="countryListRow">

                            </tbody>
                        </table>

[CampbellNash]

and this is what the table looks like...

[JangoSteve]

I hope it's okay, but I edited your comment to add syntax highlighting so I could read it a bit easier.

[CampbellNash]

Of course!

[JangoSteve]

Oh, I think the issue here is that you're writing the data to the table after dynatable has tried to read it to populate the JSON collection that dynatable uses to manipulate and rewrite the table after each action. So, what's happening, in order:

1. Dynatable reads the empty table body, creating an empty JSON collection [], then it adds the sort headers, etc..
2. Your function is populating the table with data.
3. You click a sort header to sort the table, dynatable sorts the empty array of data, then writes it to the table body (replacing the table body that you manually wrote in your function).

What you should do instead is, either a) initialize dynatable after your function populates the table, or b) just don't populate the table and let dynatable do that for you.

I don't know how your data is structured before writing it to the table, so (a) is probably easier. Just move the dynatable line:

    // This function shows Country Limits table
    function readCountries() {

    $('#countries').show();
    // Don't put dynatable here.

    var rptCountries = document.getElementById("countryListRow");
    rptCountryList = web.get_lists().getByTitle('CountriesLimits');
    var camlQuery = SP.CamlQuery.createAllItemsQuery();
    var rptCountryListItems = rptCountryList.getItems(camlQuery);
    context.load(rptCountryListItems);
    context.executeQueryAsync(

        function () {
            // Success returned from executeQueryAsync

            if (rptCountryListItems.get_count() > 0) {
                var rptCountryListItemEnumerator1 = rptCountryListItems.getEnumerator();

                // Lets get the select items
                while (rptCountryListItemEnumerator1.moveNext()) {
                    var rptCountryListItem1 = rptCountryListItemEnumerator1.get_current();
                    rptCountries.innerHTML += "<tr><td>" + rptCountryListItem1.get_id() + "</td>" +
                "<td>" + rptCountryListItem1.get_item("Title") + "</td>" +
                "<td>" + rptCountryListItem1.get_item("GiftLimit") + "</td>" +
                "<td>" + rptCountryListItem1.get_item("HospitalityLimit") + "</td></tr>";

                }
                // Put it here.
                // Let dynatable do its magic.
                $('#tblCountries').dynatable();
            }
            else { alert("There are no Countries setup. Add some now"); }
        },
        function (sender, args) {
            // Failure returned from executeQueryAsync
            alert("Error in Populating Business Units: " + args.get_message());
        }
        );


    }

[CampbellNash]

Fantastic! it works...appreciate your help and have to say Dynatable is superb!

[JangoSteve]

Awesome. Glad to hear. No problem.