使用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实现的背景颜色渐变动画效果示例
Mar 24 jQuery
jQuery插件FusionCharts绘制的2D双柱状图效果示例【附demo源码】
May 13 jQuery
jQuery Position方法使用和兼容性
Aug 23 jQuery
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
jquery根据name取得select选中的值实例(超简单)
Jan 25 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
jQuery实现适用于移动端的跑马灯抽奖特效示例
Jan 18 jQuery
html+jQuery实现拖动滑块图片拼图验证码插件【移动端适用】
Sep 10 jQuery
jQuery HTML css()方法与css类实例详解
May 20 jQuery
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
May 29 jQuery
jQuery实现朋友圈查看图片
Sep 11 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
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
Extjs表单常见验证小结
2014/03/07 Javascript
代码获取历史上的今天发生的事
2014/04/11 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
基于JS2Image实现圣诞树代码
2015/12/24 Javascript
JS深度拷贝Object Array实例分析
2016/03/31 Javascript
Bootstrap编写一个兼容主流浏览器的受众门户式风格页面
2016/07/01 Javascript
利用BootStrap弹出二级对话框的简单实现方法
2016/09/21 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
Vue组件中slot的用法
2018/01/30 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
2018/08/14 Javascript
解决webpack多页面内存溢出的方法示例
2019/10/08 Javascript
js实现数字跳动到指定数字
2020/08/25 Javascript
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
解析Python中的异常处理
2015/04/28 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
深入理解python中的闭包和装饰器
2016/06/12 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
Python如何生成树形图案
2018/01/03 Python
浅谈Python用QQ邮箱发送邮件时授权码的问题
2018/01/29 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
Python面向对象程序设计之私有属性及私有方法示例
2019/04/08 Python
Python中常用的高阶函数实例详解
2020/02/21 Python
Lookfantastic意大利官网:英国知名美妆购物网站
2019/05/31 全球购物
贝尔帐篷精品店:Bell Tent Boutique
2019/06/12 全球购物
护理专业毕业生推荐信
2013/10/31 职场文书
运动会方队口号
2014/06/07 职场文书
中专生自荐信
2014/06/25 职场文书
三严三实民主生活会发言稿
2014/10/13 职场文书
2016年学校党支部公开承诺书
2016/03/25 职场文书
解决python存数据库速度太慢的问题
2021/04/23 Python
pytorch 带batch的tensor类型图像显示操作
2021/05/20 Python
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript