数据表在初始加载时停留在“处理”

时间:2016-12-01 23:41:08

标签: javascript c# jquery ajax datatable

我试图从我的控制器获取AJAX以填充我的数据表。我用POSTMAN测试了我的GET并且它提供了正确的AJAX,并且成功:函数在我的DataTable上正常工作。

然而,当我加载页面时,DataTable卡在“处理”上。我已经尝试过更改处理和服务旁边,它仍然无效。

当我打开ServerSide时:True它收到错误:

jquery-1.10.2.js:8720 
GET http://localhost:51326/Table/Index?draw=1&columns%5B0%5D%5Bdata%5D=0&column…art=0&length=10&search%5Bvalue%5D=&search%5Bregex%5D=false&_=1480635427759 404 (Not Found)

这是我的Controller,它提供数据,以及用于创建AJAX的类。

public class stockAJAX
{
    public int StockId { get; set; }
    public string ProductGroup { get; set; }
    public string GroupType { get; set; }
    public string ItemType { get; set; }
    public string Model { get; set; }
    public string SerialNo { get; set; }
    public string NR { get; set; }
    public string Status { get; set; }
    public string Description { get; set; }
    public string DateArrived { get; set; }
    public int? CurrentLocation { get; set; }
    public string TerminalId { get; set; }
}

public class TableController : Controller
{
    List<stockAJAX> stock = new List<stockAJAX>();
    stockAJAX ajaxTemp = new stockAJAX();
    static string csv;


    [AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
    public JsonResult getAJAX()
    {
        using (TableEntities context = new TableEntities())
        {
            stock = (from c in context.stocks
                     select new stockAJAX
                     {
                         StockId = c.StockId,
                         ProductGroup = c.ProductGroup,
                         GroupType = c.GroupType,
                         ItemType = c.ItemType,
                         Model = c.Model,
                         SerialNo = c.SerialNo,
                         NR = c.NR,
                         Status = c.Status.ToString(),
                         Description = c.Description,
                         DateArrived = c.DateArrived.ToString(),
                         CurrentLocation = c.CurrentLocation,
                         TerminalId = c.TerminalId,
                     }
                                ).Take(1000).ToList();
        }

        return Json(stock, JsonRequestBehavior.AllowGet);
    }

这是我的视图中与我的javascript有关的数据表:

var Json = [
            {StockId: 0, 
            ProductGroup: " ", 
            GroupType: " ",
            ItemType: " " ,
            Model: " " ,
            SerialNo: " ",
            NR: " " ,
            Status: " ",
            Description: " ",
            DateArrived: " " ,
            CurrentLocation: 0,
            TerminalId: " ",
            },
            ];

        $("#myTable").DataTable({
            "serverSide": true,
            "processing": true,
            "JQueryUI": true,
            "stateSave": true,
            "ajax": $.ajax({
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                type: 'GET',
                url: '/Table/getAJAX',
                data: Json,
                failure: function() {alert("unavailable AJAX");},
            })
        });
        $('#loading').hide();
        $('#myTable').show();


        $("#myTable").DataTable().columns().every( function () {
            var that = this;

            $( 'input', this.footer() ).on( 'keyup change', function () {
                if ( that.search() !== this.value ) {
                    that
                        .search( this.value )
                        .draw();
                }
            } );
        } );

    });

和我的数据表:

<table class="table-fill" id="myTable">
        <thead>
            <tr>
                <th>
                    <p1>Stock Id</p1>
                </th>
                <th>
                    <p1>Product Group</p1>
                </th>
                <th>
                    <p1>Group Type</p1>
                </th>
                <th>
                    <p1>Item Type</p1>
                </th>
                <th>
                    <p1>Model</p1>
                </th>
                <th>
                    <p1>Serial No</p1>
                </th>
                <th>
                    <p1>NR</p1>
                </th>
                <th>
                    <p1>Status</p1>
                </th>
                <th>
                    <p1>Description</p1>
                </th>
                <th>
                    <p1>Date Arrived</p1>
                </th>
                <th>
                    <p1>Current Location</p1>
                </th>
                <th>
                    <p1>Terminal ID</p1>
                </th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Id</th>
                <th>Product</th>
                <th>Group</th>
                <th>Item</th>
                <th>Model</th>
                <th>Serial</th>
                <th>NR</th>
                <th>Status</th>
                <th>Descr</th>
                <th>Date</th>
                <th>Location</th>
                <th>T-ID</th>
            </tr>
        </tfoot>


    </table>

编辑:

这是我在控制器中的索引功能:

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
    public ActionResult Index(System.Web.Mvc.FormCollection collection)
    {


        //DateTime lastMonth = DateTime.Today.AddMonths(-6);

        //Recieve Data from the Select Company DropDownList
        string selectedList = collection["list"];
        //Recieve Data from the Select GroupType DropDownList
        string selectedGroupType = collection["grouptype"];
        //Recieve Data from the Show All Stock checkbox
        string selectedAmount = collection["amount"];

        //A list of type <stock> has its value recieved from the function which computes which query to use and then executes it.
        returnList(selectedGroupType, selectedList, selectedAmount);

        //Returns the view
        return View();




    }

3 个答案:

答案 0 :(得分:1)

在你的Ajax调用中传入'data:Json',mvc动作不包含任何参数,因此它不会找到你试图请求的动作。删除此行,它应该工作。

答案 1 :(得分:0)

我通过改变我定义DataTable的方式以及定义我的JSON来解决这个问题:

[AcceptVerbs(HttpVerbs.Get | HttpVerbs.Post)]
    public JsonResult getAJAX()
    {
        using (TableEntities context = new TableEntities())
        {
            stock = (from c in context.stocks
                     select new stockAJAX
                     {
                         StockId = c.StockId,
                         ProductGroup = c.ProductGroup,
                         GroupType = c.GroupType,
                         ItemType = c.ItemType,
                         Model = c.Model,
                         SerialNo = c.SerialNo,
                         NR = c.NR,
                         Status = c.Status.ToString(),
                         Description = c.Description,
                         DateArrived = c.DateArrived.ToString(),
                         CurrentLocation = c.CurrentLocation,
                         TerminalId = c.TerminalId,
                     }
                                ).Take(1000).ToList();
        }

        return Json(new
        {
            iTotalRecords = 1000,
            iTotalDisplayRecords = 10,
            sEcho = 10,
            aaData = stock}, JsonRequestBehavior.AllowGet);
    }

和我的javascript:

$("#myTable").DataTable({
            "JQueryUI": true,
            "stateSave": true,
            "ajax": '/Table/getAJAX',
            "columns": [
            { "data": "StockId" },
            { "data": "ProductGroup" },
            { "data": "GroupType" },
            { "data": "ItemType" },
            { "data": "Model" },
            { "data": "SerialNo" },
            { "data": "NR" },
            { "data": "Status" },
            { "data": "Description" },
            { "data": "DateArrived" },
            { "data": "CurrentLocation" },
            { "data": "TerminalId" }

        ],
        });

但是,当我尝试查询整个数据库时,我得到500服务器错误,但如果我查询1000个条目,它可以正常工作。

using (TableEntities context = new TableEntities())
        {
            stock = (from c in context.stocks
                     select new stockAJAX
                     {
                         StockId = c.StockId,
                         ProductGroup = c.ProductGroup,
                         GroupType = c.GroupType,
                         ItemType = c.ItemType,
                         Model = c.Model,
                         SerialNo = c.SerialNo,
                         NR = c.NR,
                         Status = c.Status.ToString(),
                         Description = c.Description,
                         DateArrived = c.DateArrived.ToString(),
                         CurrentLocation = c.CurrentLocation,
                         TerminalId = c.TerminalId,
                     }
                                ).ToList();
        }

答案 2 :(得分:0)

我回来了  draw=n 从请求参数提取的正确版本有效