Pagination with Ajax Option and Json

Pagination with Ajax Option and Json

Benjoe64Benjoe64 Posts: 4Questions: 3Answers: 1
edited July 2017 in Free community support

I am using asp.net mvc and returning a Json results. I need to add pagination to the return data but can't seems to get it working.
Below is my code. Any help will be appreciated

 <table class="table table-striped" id="Table">
        <thead>
        <tr>
            <th style="width: 50px; padding-right: 1px; font-size: 12px; font-family: serif">ID</th>
            <th style="width: 60px; padding-right: 1px; font-size: 12px; font-family: serif">Number</th>
            <th style="width: 60px; padding-right: 1px; font-size: 12px; font-family: serif">Name</th>
            <th style="width: 60px; padding-right: 1px; font-size: 12px; font-family: serif">Partsmoved</th>
           <th style="width: 60px; padding-right: 1px; font-size: 12px; font-family: serif">PartsSerial</th>
           
        </tr>
        </thead>
        <tbody id="Load">
        @foreach (var k in Model)
        {

etc

<script type="text/javascript">
    $("#SearchString").autocomplete({
        source: function (request, response) {
            var user = new Array();
            $.ajax({
                async: false,
                cache: false,
                type: "GET",
                url: "@(Url.Action("Autocomplete", "PageUsers"))",
                dataType: 'json',
                data: { "term": request.term },
                success: function (data) {
                    for (var i = 0; i < data.length ; i++) {
                        user.push({ Id: data[i].id, label: data[i].value });
                    }
                }
            });
            response(user);
        }
select: function (event, ui) {
            $.ajax({
                cache: false,
                async: false,
                type: "GET",
                url: "@(Url.Action("Test", "PageUsers"))",
                dataType: 'json',
                data: { "id": ui.item.Id },
                success: function (data) {
                    $("#ID").val(ui.item.Id);
                    var target = $("#Load");
                    target.empty();
                    for (var i = 0; i < data.length; i++) {
                        var item = data[i];
                        target.append("<tr><td>" + item.Id + "</td><td>"
                            + item.Number + "</td><td>" + item.Name + "</td><td>"
                            + item.Partsmoved + "</td><td>" + item.PartsSerial + "</td></tr>");
                    }
                },
                error: function (xhr, thrownError) {

                }
            });
</script>

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Answers

  • tangerinetangerine Posts: 3,365Questions: 39Answers: 395

    How are you initialising your DataTable?

This discussion has been closed.