当前位置: 首页 > 面试题库 >

加载ASP.Net MVC JSONResult jQuery DataTables

轩辕煜
2023-03-14
问题内容

我正在尝试使DataTables(http://datatables.net)与ASP.Net MVC控制器返回的JsonResult一起使用。我不断收到“
DataTables警告(表ID =’示例’):行0的数据源请求的未知参数‘0’”错误,根据文档表示无法找到这些列。

控制器中返回JsonResult的代码如下:

    public JsonResult LoadPhoneNumbers()
    {
        List<PhoneNumber> phoneNumbers = new List<PhoneNumber>();
        PhoneNumber num1 = new PhoneNumber { Number = "555 123 4567", Description = "George" };
        PhoneNumber num2 = new PhoneNumber { Number = "555 765 4321", Description = "Kevin" };
        PhoneNumber num3 = new PhoneNumber { Number = "555 555 4781", Description = "Sam" };

        phoneNumbers.Add(num1);
        phoneNumbers.Add(num2);
        phoneNumbers.Add(num3);

        return Json(phoneNumbers, JsonRequestBehavior.AllowGet);
    }

PhoneNumber只是一个普通的C#类,具有2个属性,即Number和Description。

检索和加载数据的javascript如下所示:

<script>
$(document).ready(function () {
    $('#example').dataTable({
        "bProcessing": true,
        "sAjaxSource": '/Account/LoadPhoneNumbers/',
        "sAjaxDataProp": ""
    });
});
</script>

和html看起来像:

<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
    <tr>
        <th>
            Number
        </th>
        <th>
            Description
        </th>
    </tr>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>

我已将sAjaxDataProp设置为空字符串,以便DataTables不会查找aaData。即使当我在控制器中像这样显式设置aaData时:

return Json(new { aaData = phoneNumbers });

我仍然收到错误。有什么建议吗?

谢谢!


问题答案:

以下对我有用:

$(function () {
    $('#example').dataTable({
        bProcessing: true,
        sAjaxSource: '@Url.Action("LoadPhoneNumbers", "Home")'
    });
});

我已删除该sAjaxDataProp财产。

使用此数据源:

public ActionResult LoadPhoneNumbers()
{
    return Json(new
    {
        aaData = new[] 
        {
            new [] { "Trident", "Internet Explorer 4.0", "Win 95+", "4", "X" },
            new [] { "Gecko", "Firefox 1.5", "Win 98+ / OSX.2+", "1.8", "A" },
            new [] { "Webkit", "iPod Touch / iPhone", "iPod", "420.1", "A" }
        }
    }, JsonRequestBehavior.AllowGet);
}

对于您的手机示例:

public ActionResult LoadPhoneNumbers()
{
    var phoneNumbers = new List<PhoneNumber>(new[] 
    {
        new PhoneNumber { Number = "555 123 4567", Description = "George" },
        new PhoneNumber { Number = "555 765 4321", Description = "Kevin" },
        new PhoneNumber { Number = "555 555 4781", Description = "Sam" }
    });

    return Json(new
    {
        aaData = phoneNumbers.Select(x => new[] { x.Number, x.Description })
    }, JsonRequestBehavior.AllowGet);
}


 类似资料:
  • 主要内容:实例,实例,闪烁的加载效果,实例,设置加载效果大小,实例,加载按钮,实例要创建加载中效果可以使用 .spinner-border 类: 实例 <div class="spinner-border"></div> 可以使用文本颜色类设置不同的颜色: 实例 <div class="spinner-border text-muted"></div> <div class="spinner-border text-primary"></div> <div class="spi

  • 介绍 加载图标,用于表示加载中的过渡状态。 引入 import { createApp } from 'vue'; import { Loading } from 'vant'; const app = createApp(); app.use(Loading); 代码演示 加载类型 通过 type 属性可以设置加载图标的类型,默认为 circular,可选值为 spinner。 <van-l

  • 所谓的预加载技术就是在用户尚未触发页面跳转时,提前创建目标页面,这样当用户跳转时,就可以立即进行页面切换,节省创建新页面的时间,提升app使用体验。mui提供两种方式实现页面预加载。 方式一:通过mui.init方法中的preloadPages参数进行配置. mui.init({ preloadPages:[ { url:prelaod-page-url,

  • 定义 页面局部处于等待异步数据或正在渲染过程时,合适的加载动效会有效缓解用户的焦虑。 图片展示 代码演示 import Load from 'pile/dist/components/load', <Load show={true} timeOut={3000} loadType='carFace' loadSize='small' /> 属性 参数 描述 数据类型 默认值 s

  • 描述 在 Jboot 开发模式下,可以添加配置 undertow.devMode = true 来开启热加载功能。 Maven 多模块( module )下资源文件热加载 在 Jboot 中,内置了一个类叫 JbootResourceLoader,只有在 dev 模式下才生效。 JbootResourceLoader 在 Jboot 启动的时候,会自动去监控各个 Maven 模块下的 src/ma

  • 加载数据时显示动效。 区域加载 在表格等容器中加载数据时显示。 Element Plus 提供了两种调用 Loading 的方法:指令和服务。对于自定义指令v-loading,只需要绑定Boolean即可。默认状况下,Loading 遮罩会插入到绑定元素的子节点,通过添加body修饰符,可以使遮罩插入至 DOM 中的 body 上。 <template> <el-table v-loa

  • Loading 加载 加载数据时显示动效。 区域加载 在表格等容器中加载数据时显示。 :::demo constructor(props) { super(props); this.table = { columns: [ { label: "日期", prop: "date", width: 180 },

  • 这是一个 属性型指令,它可以被用在任何元素上。 加载数据时显示动效。 区域加载 在容器中加载数据时显示。 默认状况下,Loading 遮罩会插入到绑定元素的子节点 <!-- 你可以为 [el-loading] 绑定一个变量--> <!-- 默认将占满整个父级窗口 --> <div [el-loading]="true"> <el-tag>加载中..</el-tag> </div> 加载文案 可