使用jquery DataTable和ajax向页面显示数据列表的方法


Posted in jQuery onAugust 09, 2018

首先在html页面定义好相关长度的行和列,假设table的id=data-table“”

使用jquery DataTable在js中这么写

$(function() {
	$('#data-table').DataTable(
			{
				order : [ [ 1, 'desc' ] ],
				ajax : {
					url : "/products",
					type : 'GET',
					dataSrc : ""
				},
				columns : [ {
					data : "id"
				}, {
					data : "id"
				}, {
					data : "title",
					defaultContent : ""
				}, {
					data : "sell_point",
					defaultContent : ""
				}, {
					data : "price",
					defaultContent : ""
				},{
					data : "number",
					defaultContent : ""
				},{
					data : "image",
					defaultContent : ""
				},{
					data : "cid",
					defaultContent : ""
				},{
					data : "id"
				}],
				columnDefs : [{
					targets : [ 0 ],
					orderable : false,
					render : function(id, type, row, meta) {
						return '<input id="input-' + id
								+ '" type="checkbox" name="ids" value=' + id
								+ '><label for="input-' + id + '"></label>';
					}
				},{
					targets: [8],
					render: function(data, type, row, meta) {
						return '<a title="编辑" href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="product_edit('+ data +')" style="text-decoration:none"><i class="Hui-iconfont">?</i></a><a title="删除" href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="product_del(' + data +')" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont">?</i></a>'
					}
				}]
			});
});

其中ajax中定义了访问后台数据的url和访问方式

colums定义的是返回来的数据类型,对应着页面当中的各列,数量必须一致。

columnDefs中targets是为某一列绑定一个回调函数,比如第一列是id值,但是不想显示id值,那么targets就是[0]代表第一项,为它返回了一串html代码并将id值加入其中,便于后续的操作。

以上这篇使用jquery DataTable和ajax向页面显示数据列表的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
jquery 校验中国身份证号码实例详解
Apr 11 jQuery
基于jQuery封装的分页组件
Jun 26 jQuery
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
jquery学习笔记之无new构建详解
Dec 07 jQuery
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jquery无缝图片轮播组件封装
Nov 25 jQuery
Jquery实现无缝向上循环滚动列表的特效
Feb 13 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
jQuery表单选择器用法详解
Aug 22 jQuery
jQuery 实现批量提交表格多行数据的方法
Aug 09 #jQuery
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 #jQuery
通过jquery的ajax请求本地的json文件方法
Aug 08 #jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 #jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 #jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 #jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 #jQuery
You might like
ThinkPHP惯例配置文件详解
2014/07/14 PHP
php实现CSV文件导入和导出
2015/10/24 PHP
在WordPress中获取数据库字段内容和添加主题设置菜单
2016/01/11 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
简要剖析PHP的Yii框架的组件化机制的基本知识
2016/03/17 PHP
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
JavaScript每天必学之数组和对象部分
2016/09/17 Javascript
解决低版本的浏览器不支持es6的import问题
2018/03/09 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
js验证身份证号码记录的方法
2019/04/26 Javascript
微信小程序模板消息限制实现无限制主动推送的示例代码
2019/08/27 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[01:18:45]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第三场2月1日
2021/03/11 DOTA
Python中max函数用法实例分析
2015/07/17 Python
python 编程之twisted详解及简单实例
2017/01/28 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
使用Python进行AES加密和解密的示例代码
2018/02/02 Python
Django利用cookie保存用户登录信息的简单实现方法
2019/05/27 Python
python flask web服务实现更换默认端口和IP的方法
2019/07/26 Python
python写程序统计词频的方法
2019/07/29 Python
Python代理IP爬虫的新手使用教程
2019/09/05 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
matplotlib绘制鼠标的十字光标的实现(内置方式)
2021/01/06 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
简历中自我评价范文3则
2013/12/14 职场文书
文明礼仪标语
2014/06/13 职场文书
违章停车检讨书
2014/10/21 职场文书
2015年导购员工作总结
2015/04/25 职场文书
2016党员党课心得体会
2016/01/07 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
解决Django transaction进行事务管理踩过的坑
2021/04/24 Python
浅谈JS的二进制家族
2021/05/09 Javascript
python blinker 信号库
2022/05/04 Python