Vuejs Ajax 调用和 dataTable

2024-05-22

I'm using Vuejs and dataTable for one of my project. I make an Ajax call and push data into an array. After that I use v-for to loop the data in the <tr> tag. Most of the time it doesn't work. The table loads as soon as the page has finished loading.. it takes a bit of time to receive the ajax data. Here is the output. It says no data available in the table enter image description here

所以serch选项不能正常工作。我想使用 setTimeout 函数(这是一个坏主意)在一段时间后加载表。正确的方法是什么?分享代码:

    new Vue({
                el: '#app',
                data: {
                    entries: [],
                },
                methods:{
                    getData(){
                        var route = '/admin/temporary-enrolled-students';
                        this.$http.get(route).then((response)=>{
                            for(var i = 0; i< response.data.length;i++)
                            {
                                this.entries.push({
                                    scId: response.data[i].id,
                                    name: response.data[i].user.name,
                                    phone: response.data[i].user.phone,
                                    email: response.data[i].user.email,
                                    courseId: response.data[i].course.id,
                                    courseName: response.data[i].course.course_title,
                                    expiryDate: response.data[i].expiry_date,
                                    shares: response.data[i].number_of_shares,
                                    expired: (response.data[i].expired == 1),
                                    enrollDate: response.data[i].created_at
                                })
                            }

                        })
                    },
                },
                mounted(){
                    this.getData();
                },
            });
//data table
$(function () {
            setTimeout(()=> {          
                $("#temp-enroll").DataTable({
                    "paging": true,
                    "ordering": false,
                    "info": true,
                    "autoWidth": false
                });
            },1000);
        });

在刀片中:


好吧,我尝试了这个,并且完全按照我想要的方式工作。感谢大家的支持。

new Vue({
                el: '#app',
                data: {
                    entries: [],
                },
                methods:{
                    getData(){
                        var route = '/admin/temporary-enrolled-students';
                        this.$http.get(route).then((response)=>{
                            for(var i = 0; i< response.data.length;i++)
                            {
                                this.entries.push({
                                    scId: response.data[i].id,
                                    name: response.data[i].user.name,
                                    ............................
                                    ......................
                                    enrollDate: response.data[i].created_at
                                })
                            }

                        }).then(()=>{
                          $("#temp-enroll").DataTable({
                            "paging": true,
                            "ordering": false,
                            "info": true,
                            "autoWidth": false
                             });
                          });
                    },
                },
                mounted(){
                    this.getData();
                },
            });
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vuejs Ajax 调用和 dataTable 的相关文章

  • 我可以动态创建/销毁 Vue 组件吗?

    因此 我正在创建一个相当复杂的 Vue 应用程序 它从后端 API 获取数据并将其显示在前端 具体取决于用户选择的过滤器 它的默认设置是立即显示所有内容 然后一旦用户选择过滤器 它就会拉出不具有这些属性的 卡片 组件 直到今天 一切都很顺利
  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable
  • 监听来自动态vue组件的事件

    您将如何侦听动态创建的组件实例发出的事件 在示例中 顶部组件添加到 DOM 中 而第二个组件是在 javascript 中动态创建的 Vue component button counter data function return cou
  • Eslint 状态已声明 [Vuex]

    我正在运行 ESLint 目前遇到以下 ESLint 错误 错误 状态 已在上部范围无阴影中声明 const state date show false const getters date state gt state date show
  • jquery数据表跨页行数

    我正在为我的 HTML 表使用 jQuery DataTables 插件 有没有办法跨页获取我的表格中的行数的行数 例如 如果我有70我的表中的行 比方说50其中显示在第一页上 并且20在第二页 有没有办法得到计数70 我已经尝试了这篇文章
  • 模态仅在第二次单击后显示

    我正在 vue2 中以 1 个组件 1 个文件样式进行开发 我有一个通过 Bootstrap Vue 表组件构建的表 我使用提供程序向它传递一个项目 其中一列包含每行的修改按钮 这些按钮触发引导模式 我使用 V if 来初始化表及其属性
  • 如何从 html 字符串向 jQuery DataTable 添加多行

    我有一个 jQuery DataTable 我想向其中添加 html tr 行 这些行以 html 字符串的形式出现 我可以使用标准 jQuery 将它们添加到表中 但这意味着它们绕过 DataTable 对象 并在重新排序表时丢失 要使用
  • 我应该如何处理 Vuex 中的事件?

    我习惯使用全局事件总线来处理跨组件方法 例如 var bus new Vue Component A bus emit DoSomethingInComponentB Component B bus on DoSomethingInComp
  • 如何更改 Vuetify 日历日期格式

    我正在尝试在以下 Vuetify 日历上启用输入事件 https github com vuetifyjs vuetify blob master packages docs src examples calendars complex e
  • 数据表导出按钮问题 - 按钮不显示

    我试图在屏幕中央和数据表下方显示一个导出按钮 该按钮根本不显示 我已经下载了数据表文件 它们托管在我的服务器上 因此是本地引用
  • viewChild如何获取Angular2中添加了js的元素?

    如果一个 HTML 元素已添加到 DOM 中 例如单击按钮后 我们如何访问该元素 viewChild 看不到它 更新1 更多说明 我用过 jquery 数据表 jquery dataTablesdefineTyped 版本 https gi
  • 如何在 vue 模板中使用 `console.log` 或 `console.error`?

    我有一个 vue 组件
  • 在 Vue js 中获取 JSON 属性时出错

    我在使用 Vue js 时遇到了一个奇怪的行为 我进行 ajax 调用 将结果 一些 JSON 存储到名为 modello 的 Vue 数据属性中 lineaGialla selected false descrizione Questa
  • 将 async/await 与 webpack-simple 配置一起使用会引发错误:RegeneratorRuntime 未定义

    我正在使用具有以下配置的 webpack simple 模板 包 json name vue wp simple description A Vue js project version 1 0 0 author v private tru
  • 如何从 vue 组件调用 App.vue 中的方法

    我有一个 vue 组件和一个 vue 元素声明 如下所示 Vue component todo item template li This is a todo li methods test function I am getting an
  • Datatables TableTools 同一页面上的多个表

    我在同一页面上使用 DataTables 和 TableTools 的多个实例时遇到问题 DataTables 工作正常 但是当使用 TableTools 时 只有第一个表可以完全使用按钮 所有按钮在所有表格上都显示良好 但当您单击按钮时它
  • Shiny:如何在数据表中显示条形图

    我想在数据表中显示条形图 这link http jsfiddle net annoyingmouse em27yod1 显示我想使用 javascript 做什么 我不了解 javascript 或 html 所以你能告诉我是否可以使用闪亮
  • 无法使用Vue获取灵活元素的CSS属性值

    我正在尝试获取 CSSwidth灵活元素的属性 但由于某种原因它不起作用 代码笔 https codepen io anon pen pLEwdp editors 1010 https codepen io anon pen pLEwdp
  • 如何以编程方式启动 Vuetify 对话框并等待响应

    我对 Vue js 和 Vuetify 相当陌生 使用 AngularJS 好几年了 但我们公司正在转向 Vue js 我想要完成的是 当用户单击 登录 按钮时 它会执行一些检查 即用户名不能为空 并启动 Vuetify 对话框来提醒用户
  • Vue 监听 Vuex 提交吗?

    有没有一种方法可以监听 Vuex 提交 而不观察任何随提交而更改的属性 只是简单地找出是否发生了提交 我有一个 Filter 组件 想将其放入 NPM 包中 但我已经有一个用例 在该用例中 我希望设置一个 cookie 在选择过滤器时存储过

随机推荐

  • cordova官方文档中的cookie支持

    我读过很多问题 询问科尔多瓦 电话间隙是否支持 cookie 如下所示 PhoneGap Cordova 如何使用cookies iOS https stackoverflow com questions 11220244 phonegap
  • 将nodejs Express静态请求重定向到https

    我需要将所有 http 请求重定向到 https 包括对静态文件的请求 My code app use express static dirname public app get function req res if req secure
  • PHP - 从动态添加的 html 表格行获取输入

    我在这里设置了以下小提琴Fiddle https jsfiddle net fqugd7vL 7 如您所见 我可以通过单击 添加行 按钮来添加输入 添加的所有输入都有唯一的 ID 和名称 问题是 我不能只做类似的事情 actionInput
  • C# 中的 Oracle 连接 - 连接字符串

    我目前正在尝试用 C 构建一个应用程序并将其连接到在 Oracle 11g 中运行的实时数据库 我有以下连接详细信息 Host IP 10 204 1 3 Port 1521 DB Name PROD 我的源代码 string connSt
  • 无法使用 build auto 和 tfs 13 修改 .csproj 文件

    我创建了一个名为的工作流活动EditCsproj这是我添加到构建模板中的 C 类 我把它放在后面Initialize Workspace step 此工作流程必须获取所有 csproj我作为参数提供的目录路径中的文件 并且必须修改它们 但对
  • 两阶段处理:不要从第 1 阶段 XSLT 2.0 处理输出空标签

    我有一些复杂的 XSLT 2 0 转换 我试图找出是否有通用方法来确保不输出空标签 所以 从概念上讲 处理的最后阶段递归地删除所有空标签 我知道这可以通过一个单独的 XSLT 来完成 它除了过滤掉空标签之外什么也不做 但我需要将它们全部打包
  • Selenium driver.page_source() 仅提取部分 HTML DOM

    我有一个网页 当我右键单击它然后查看页面源时 我得到 SECTION A 但是当我点击它然后检查时 我得到了更长的输出 我尝试使用 JS 获取页面源 但同样的问题 我得到了输出SECTION A 我怎样才能解决这个问题 注意 我正在寻找通用
  • 如何在 IOS safari 上禁用缓存?

    有没有办法禁用 ipad iphone 上的缓存 我想针对非缓存体验运行一些自动化测试 我刚刚偶然发现了一种在 iOS 上禁用 Safari 缓存的方法 iOS Open Settings 导航Safari gt 高级 Enable 网页检
  • JSX 支持哪些 ES6 功能?

    我在用着与 JSX 进行反应 with 反应工具 https www npmjs com package react tools将 JSX 代码编译为 JavaScript JSX 支持哪些 ES6 功能harmony选项已启用 感谢康加克
  • × TypeError:无法读取未定义的属性(读取“map”)

    当我尝试运行此代码时 它给出了此错误 TypeError 无法读取未定义的属性 读取 map 为什么会发生这种情况 我怎样才能让它发挥作用 import React from react import Grid from material
  • setSize() 不起作用?

    我有一个程序 需要两个按钮 一个是常规按钮 另一个具有根据鼠标悬停而变化的图片 目前 由于图片很大 JButton自定义也很大 我可以更改自定义的大小并保持图像 和翻转图像 成比例吗 我尝试过 setSize 但它没有任何作用 对于任何反馈
  • 使用 php 和 mysql 计算日期差(以小时为单位)

    我如何使用 php 和 mysql 找到以小时为单位的日期差异 Use TIMEDIFF http dev mysql com doc refman 5 1 en date and time functions html function
  • 如何将 WKUIDelegate 实现到 SwiftUI WKWebView 中?

    我正在 Xcode v11 上创建一个 Web 应用程序 但在实现 WKUIDelegate 来显示 Javascript 警报并在 Web 应用程序上正确确认时遇到问题 我在 ContentView swift 上得到了一个非常简单的 w
  • 使用条件注释的目的