Py学习  »  Jquery

未调用jquery getjson方法

Fletch • 4 年前 • 239 次点击  

我正在尝试使用jquery和json创建带有分页的表,但无法获取 getJSON 工作方法。javascript函数 GetPageData 在页面加载时调用,并且正在成功调用。我已经测试了在下面的代码中添加两个注释掉的行,并且可以看到 格特森 方法有任何效果。

function GetPageData(pageNum, pageSize) {
    $("#tblData").empty();
    $("#paged").empty();
   // $("#tblData").append('<tr><td>1</td><td>2</td></tr>')
    $.getJSON("/Retailers/GetPagedData", { pageNumber: pageNum, pageSize: pageSize }, function (response) {
     //   $("#tblData").append('<tr><td>1</td><td>2</td></tr>')
        var rowData = "";
        for (var i = 0; i < response.Data.length; i++) {
            rowData = rowData + '<tr><td>' + response.Data[i].Name + '</td><td>' + response.Data[i].RetailerCode + '</td></tr>';
        }
        rowData = rowData + '<tr><td>Name</td><td>RetailerCode</td></tr>';
        $("#tblData").append(rowData);
        PagingTemplate(response.TotalPages, response.CurrentPage);
    });

下面是index.cshtml视图,位于Retailers文件夹中。

@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/jquery")
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
@{
    ViewBag.Title = "Manage Retailers";
}
<p class="h2">Manage Retailers</p>
<br /><br />
<table class="table table-bordered">
    <thead>
        <tr>
            <th>Retailer Name</th>
            <th>Retailer Code</th>
        </tr>
    </thead>
    <tbody id="tblData"></tbody>
</table>
<div id="paged"></div>

下面是零售商管理者…

using System;
using System.Collections.Generic;
using System.Data;
using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.Mvc;
using CCM.Models;
using CCM.Helper;

namespace CCM.Controllers
{
    public class RetailersController : Controller
    {
        MCDevEntities context = new MCDevEntities();
        public ActionResult Index()
        {
            return View();
        }
        public ActionResult GetPagedData(int pageNumber = 1, int pageSize = 20)
        {
            List<Retailer> listData = context.Retailers.ToList();
            var pagedData = Pagination.PagedResult(listData, pageNumber, pageSize);
            return Json(pagedData, JsonRequestBehavior.AllowGet);
        }
    }
}

我是否遗漏了任何明显的可以阻止这项工作的东西?我还有一个包含pageddata.cs和pagination.cs的助手文件夹。页面URL为localhost:…/retailers/index。

编辑。

如果它有帮助的话,下面是其余的javascript:

$(document).ready(function () {
    //Initially load pagenumber=1, pagesize=20
    GetPageData(1, 20);
});

function PagingTemplate(totalPage, currentPage) {
    var template = "";
    var TotalPages = totalPage;
    var CurrentPage = currentPage;
    var PageNumberArray = Array();


    var countIncr = 1;
    for (var i = currentPage; i <= totalPage; i++) {
        PageNumberArray[0] = currentPage;
        if (totalPage != currentPage && PageNumberArray[countIncr - 1] != totalPage) {
            PageNumberArray[countIncr] = i + 1;
        }
        countIncr++;
    };
    PageNumberArray = PageNumberArray.slice(0, 5);
    var FirstPage = 1;
    var LastPage = totalPage;
    if (totalPage != currentPage) {
        var ForwardOne = currentPage + 1;
    }
    var BackwardOne = 1;
    if (currentPage > 1) {
        BackwardOne = currentPage - 1;
    }

    template = "<p>" + CurrentPage + " of " + TotalPages + " pages</p>"
    template = template + '<ul class="pager">' +
        '<li class="previous"><a href="#" onclick="GetPageData(' + FirstPage + ')"><i class="fa fa-fast-backward"></i>&nbsp;First</a></li>' +
        '<li><select ng-model="pageSize" id="selectedId"><option value="20" selected>20</option><option value="50">50</option><option value="100">100</option><option value="150">150</option></select> </li>' +
        '<li><a href="#" onclick="GetPageData(' + BackwardOne + ')"><i class="glyphicon glyphicon-backward"></i></a>';

    var numberingLoop = "";
    for (var i = 0; i < PageNumberArray.length; i++) {
        numberingLoop = numberingLoop + '<a class="page-number active" onclick="GetPageData(' + PageNumberArray[i] + ')" href="#">' + PageNumberArray[i] + ' &nbsp;&nbsp;</a>'
    }
    template = template + numberingLoop + '<a href="#" onclick="GetPageData(' + ForwardOne + ')" ><i class="glyphicon glyphicon-forward"></i></a></li>' +
        '<li class="next"><a href="#" onclick="GetPageData(' + LastPage + ')">Last&nbsp;<i class="fa fa-fast-forward"></i></a></li></ul>';
    $("#paged").append(template);
    $('#selectedId').change(function () {
        GetPageData(1, $(this).val());
    });
}
Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/37902
 
239 次点击  
文章 [ 2 ]  |  最新文章 4 年前
iSahilSharma
Reply   •   1 楼
iSahilSharma    5 年前

尝试并检查:

    $.ajax({
        url: '@Url.Action("GetPagedData", "Retailers")',
        data: {pageNumber : pageNum,
            pageSize: pageSize 
        },
        success: function (response) {
             console.log(response);
            //   $("#tblData").append('<tr><td>1</td><td>2</td></tr>')
            var rowData = "";
            for (var i = 0; i < response.Data.length; i++) {
                rowData = rowData + '<tr><td>' + response.Data[i].Name + '</td><td>' + response.Data[i].RetailerCode + '</td></tr>';
            }
            rowData = rowData + '<tr><td>Name</td><td>RetailerCode</td></tr>';
            $("#tblData").append(rowData);
            PagingTemplate(response.TotalPages, response.CurrentPage);
        }
    });
Ajit Boyite
Reply   •   2 楼
Ajit Boyite    5 年前

尝试使用下面的代码

$.ajax({
            url: '/Retailers/GetPagedData',
            data: {
                pageNumber: pageNum,
                pageSize: pageSize
            },
            success: function (response) {
                //code
            }
        });