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

向右看齐 2022-09-03 06:17 155阅读 0赞

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

发布时间：2020-09-13 22:39:28

来源：脚本之家

阅读：80

作者：稻草一根

首先在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 '';

\}

\},\{

targets: \[8\],

render: function(data, type, row, meta) \{

return '****'

\}

\}\]

\});

\});

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

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

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

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

发表评论取消回复

表情：

评论列表（有 0 条评论，155人围观）

还没有评论，来说两句吧...

相关阅读

相关使用jQuery实现Ajax 列表数据显示 (一）

从集合中取出数据显示到JSP页面中，使用jQuery实现Ajax，返回JSON的数据格式哦！ ![watermark_type_ZmFuZ3poZW5naGVpdGk_s

短命女/ 2023年10月18日 17:42/ 0 赞/ 108 阅读

相关 datatable ajax datasrc,使用jquery DataTable和ajax向页面显示数据列表的方法

使用jquery DataTable和ajax向页面显示数据列表的方法发布时间：2020-09-13 22:39:28 来源：脚本之家阅读：80 作者：稻草一根

向右看齐/ 2022年09月03日 06:17/ 0 赞/ 156 阅读

相关 [jQuery]jQuery DataTables插件自定义Ajax分页实现

![JQuery DataTables插件自定义Ajax分页实现][JQuery DataTables_Ajax] 前言昨天在博客园的博问上帮一位园友解决了一个问题，

绝地灬酷狼/ 2022年08月23日 00:47/ 0 赞/ 287 阅读

相关 springmvc + jquery datatable + ajax实现动态分页查询

网上关于jquery datatable的例子很多,但结合springmvc的例子很少,搞了2天才把这个弄明白,现在记录下来,作为学习笔记。 1.导入所需文件 (1) jq

桃扇骨/ 2022年08月20日 04:18/ 0 赞/ 270 阅读

相关数据列表 datatable的应用

本文共四部分：官网 | 基本使用|遇到的问题|属性表一：官方网站：\[http://www.datatables.net/\] 二：基本使用：\[http://www.g

比眉伴天荒/ 2022年08月05日 04:29/ 0 赞/ 292 阅读

相关 Jquery.DataTable使用

Jquery.DataTable插件使用 DataTable插件是一款基于jquery的表格插件，其官网地址为[http://datatables.net/][http_

约定不等于承诺〃/ 2022年06月13日 03:44/ 0 赞/ 227 阅读

相关使用jquery dataTable

转自：https://www.cnblogs.com/zjoch/p/4354197.html jQuery 的插件 dataTables 是一个优秀的表格插件，提供了

水深无声/ 2022年05月27日 03:12/ 0 赞/ 232 阅读

相关 JQuery使用Datatable插件（二）——使用AJAX与后端交互

一、html代码（我自定义了一个搜索框，同时用到了bootstrap框架）注意引入相应文件，同时table一定要有thead <!DOCTYPE html>

你的名字/ 2021年12月11日 05:05/ 0 赞/ 681 阅读

相关 jquery dataTable

文章目录通用配置最基本用法字改成中文 ajax动态加载数据

待我称王封你为后i/ 2021年09月28日 09:20/ 0 赞/ 450 阅读

相关 jquery.datatables使用

1、DataTables错误： requested unknown parameter：使用Datatables如果配置的column字段在后台返回的json数据中缺失，那

谁借莪１个温暖的怀抱￠/ 2021年06月24日 15:59/ 0 赞/ 527 阅读