首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在ajax上成功插入后重新绘制jquery datatable

,可以按照以下步骤进行操作:

  1. 首先,确保你已经引入了jQuery和DataTables的相关库文件。
  2. 在HTML页面中,创建一个表格容器,用于显示DataTables。
代码语言:txt
复制
<table id="myTable" class="display" style="width:100%"></table>
  1. 在JavaScript代码中,初始化DataTables,并配置相关参数。
代码语言:txt
复制
$(document).ready(function() {
    var table = $('#myTable').DataTable({
        // 配置参数
        // ...
    });
});
  1. 在插入数据的ajax请求成功后,重新绘制DataTables。
代码语言:txt
复制
$.ajax({
    url: '插入数据的接口地址',
    method: 'POST',
    data: {
        // 插入数据的参数
        // ...
    },
    success: function(response) {
        // 插入成功后的回调函数
        // ...

        // 重新绘制DataTables
        var table = $('#myTable').DataTable();
        table.draw();
    },
    error: function(error) {
        // 处理错误情况
        // ...
    }
});

在上述代码中,通过ajax发送插入数据的请求,并在成功回调函数中重新绘制DataTables。首先获取DataTables实例,然后调用draw()方法重新绘制表格,以显示最新的数据。

这样,当插入数据成功后,DataTables会重新加载数据并重新渲染表格,实现了在ajax上成功插入后重新绘制jquery datatable的功能。

关于DataTables的更多详细信息和使用方法,你可以参考腾讯云的产品介绍页面:DataTables - 腾讯云

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

datatables应用程序接口API

后者返回的是jQuery实例(如果是这个方式初始化Datatables,那么返回的对象不能使用api方法,不然会报方法未定义) 核心(Core) 名称 说明 ajax.reload()API 重新加载数据源获取数据...(不能指定新的数据源) ajax.url().load()API 设置新的url数据源重新加载数据 ajax.url()API 设置新的url数据源 draw()API 重绘表格 $()API 整个表格里执行...(完成)一个 jQuery 选择器操作 ajax.json()API 获得最终的json数据 ajax.params()API 获取最后一次Ajax请求提交的参数 ajaxAPI ajax方法的命名空间...off()API 移除表格的监听事件 on()API 监听表格事件 one()API 第一次监听表格事件,然后移除监听 order()API 获得/设置表格排序 order.listener()API 一个元素为一个给定列添加一个排序监听...实例 toArray()DT 把结果集转换为javascript数组 toJQuery()DT 转为jQuery实例 unique()DT 去重 unshift()DT 结果集里从头添加一个或多个项目

4.4K30

datatables使用教程

分页,即时搜索和排序 几乎支持任何数据源:DOM, javascript, Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation...做法有很多,可以ajax异步拿到数据,进行dom操作,把数据填入table中,进行datatables.ajax.reload() 这样当然可以,但是代码很乱,难看。...pageInfo.getTotal(); return DataTableBulid.build(draw, (int) total,users); } /** * 手动插入...要求服务器接收到此参数再返回(具体看 下面) start integerJS 第一条数据的起始位置,比如0代表第一条数据 length integerJS 告诉服务器每页显示的条数,这个数字会等于返回的...过滤的记录数(如果有接收到前台的过滤条件,则返回的是过滤的记录数) data arrayType 必要。表中中需要显示的数据。

7K20

富Web应用的架构与转化方法:Web应用系列第二篇

本课程中,我们将使用RichFaces组件。 丰富的应用程序的标志之一是缺少页面重新加载和减少页面导航。例如,您在表单输入数据,然后单击“提交”按钮。没有明显的等待响应。...虽然有内置的JSF标记可以管理Ajax事务,但我们将把注意力集中在这个单元中的RichFaces标记库。 ?...RichFaces库引入了流行的jQuery库。 快速入门演示了使用jQuery注册新成员时显示消息。...Javascript回调函数ondataavailable执行包含jQuery逻辑的代码。 push标签内,我们有一个标签。...需要能够JSF生命周期中的某个点应用验证,我们知道所有属性值已成功存储支持页面的托管bean中。 可以使用RichFaces图验证器。 使用图形验证器分为两步。

3.5K20

ASP.NET 大学场地预约借用系统(源码+数据库)

数据交互采用AJAX,数据库用的SQL Sever。 1、目标与应用场景 同学们进行各类活动时,通常需要一定的场地配合。如果是室外场地,例如操场等无需进行借用预约便可使用。...预约:用户根据自己需要的场地类型,选择合适的场地,选中系统显示该场地已被预约的时段,避免产生冲突。用户选择好时间段以后即可进行预约,系统检测预约是否冲突,如果不冲突则预约成功。...3、关键问题与实现代码 该系统中,关键性的问题主要有以下几个: (1)AJAX接口的设计问题,项目属于轻量级项目,不需要多个后台接口文件(.ashx),避免造成管理上的不便。.../3.3.2/json3.js"> 前端的界面使用了一个小型而时尚...预约成功显示预约的教室: ?

3.7K20

dataTable参数说明

String模式: 直接传入一个string作为远程ajax请求路径 String 对象模式: 支持JQuery.ajax函数的参数设置,支持type,url等标准参数....例如: $('#example').dataTable( { "ajax": { "url": url, "type": "POST" } } ); JQuery...ajax 函数对应参数 ajax.data 和标准JQuery.ajax的data参数作用类似,但效果有所不同.仅当 serverSide参数为true的时候,参数属性才有意义,当serverSide...添加方式, ajax.data可以直接赋值一个对象,这个对象的属性会添加到原信息类里面去一起发送到服务端.例如: $('#example').dataTable( { "ajax":...Number /Array false destroy 设为ture时通知dataTable函数完全重新建立一个新的控件实例,一个页面内反复对同一个控件加载dataTable函数并且想重新建立控件时使用

4.5K20

asp.net :使用jqueryajax +WebService+json 实现无刷新去后台值

首先贴上Jqueryajax: $.ajax({ url: 'ws_Ajax.asmx/BindDictByUpper', type...转换为Json /// /// Datatable对象 /// Json字符串...    //然后webservice中需要返回json数据的方法加上如下属性  [ScriptMethod(ResponseFormat=ResponseFormat.Json)]...类前面加上这句话就可以了 加上以后再运行,好,可以调到后台了 后台的数据也发送到前台 但又出现问题列,发过来的数据不能以解析出来json数据 按网上说的,只要把ajax中的dataType设置为json...就行了,但是实际不行,然后在网上查了下: 1、对于服务器返回的JSON字符串,如果jquery异步请求没做类型说明,或者以字符串方式接受,那么需要做一次对象化处理,方式不是太麻烦,就是将该字符串放于eval

3.8K60

Gulp构建实例

mixins.scss 预编译文件,_variables.scss 变量定义文件,font-awesome.scss 模块导入文件 脚本使用说明 基本组件 error.js 用途:低版本浏览器访问限制 用法:...用法:引入,以下结构绘制表格 例: daterange-picker.js 用途:基于 bootstrapt 的日期范围选择器 modernizr.custom.js 用途:提供过渡动画支持 jQuery...宽度自动处理 用法:引入,以下结构绘制表格 例: /* 根据ID初始化表格,以下 .table 类用于实现单选和多选 */ $("#dataTable1").dataTable({ "sPaginationType...用途:饼状图绘制工具 用法:引入文件,按 ID 初始化 DOM 元素 传送门:rendro.github.io 例: <!...用途:canvas 图表绘制工具 用法:引入按 ID 初始化,ul 部分为横轴坐标,可在 style.scss 文件中配置宽度 传送门:omnipotent.net 例: <div class="widget-container

1.8K40

Ajax:初次认识ajaxajax使用方法

AJAX 是一种无需重新加载整个网页的情况下,能够更新部分网页的技术。 Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。...传统的网页(即不用ajax技术的网页),想要更新内容或者提交一个表单,都需要重新加载整个网页。 使用ajax技术的网页,通过在后台服务器进行少量的数据交换,就可以实现异步局部更新。...登陆时,提示用户名密码错误 删除数据行时,将行ID发送到后台,后台在数据库中删除,数据库删除成功页面DOM中将数据行也删除。...通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器请求文本、HTML、XML 或 JSON – 同时您能够把这些外部数据直接载入网页的被选元素中。...xml": 将服务器端返回的内容转换成xml格式 "text": 将服务器端返回的内容转换成普通文本格式 "html": 将服务器端返回的内容转换成普通文本格式,插入

5.7K20

ASP.Net开发基础温故知新学习笔记

如果保持连接会降低客户端并发处理请求数,不保持连接会降低处理速度(建立连接速度很慢);     ②请求(Request):包含请求类型、请求的数据以及客户端信息等;     ③响应(Response):包含具体HTML、响应是否成功以及错误码等...代码$.ajax中的$时把$当做NVelocity中的特殊符号,应对方法是使用jQuery.ajax代替$.ajax;       如果要将DataTable传递给NVelocity时仅传递DataTable.Rows...ViewState;      ③机密数据无法保证安全性; (3)Cookie:(★★★★→重点) ①基本概念:保存在浏览器端,每次向服务器提交请求时都会带上Cookie;服务器返回报文除了Html外还有更新的...)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成) { if (xmlhttp.status == 200) //如果Http状态码为200则是成功...}   (5)AJAX优点缺点:      ①优点:页面无刷新,页面内与服务器通信,给用户的体验非常好;“按需取数据”,可以最大程度的减少冗余请求和响应对服务器造成的负担;基于XML标准化,并被浏览器广泛支持

2.2K10

DjangoWeb使用Datatable进行后端分页的实现

使用场景:不使用Django的模版语言进行分页(网上大多数都使用该方式),使用Jquery DataTable.js 插件进行分页处理。...故使用Ajax定时刷新获取最新数据,两种方案各有优劣,根据实际场景进行抉择。...monitorTable" style="width: 100%" </table <script src="{% static '/bower_components/datatables.net/js/<em>jquery</em>.dataTables.min.js...开启此模式<em>后</em>,你对datatables的每个操作 每页显示多少条记录、下一页、<em>上</em>一页、排序(表头)、搜索,这些都会传给服务器相应的值。...但是使用了get方式<em>后</em>,<em>在</em>某页进行操作再进行上面的JS刷新时会出现行序号紊乱或者分页信息被重置的问题。 这也是我碰到的一个坑。 特此记录一下。

4.9K20
领券