广告
返回顶部
首页 > 资讯 > 精选 >jQuery插件datatables如何使用
  • 124
分享到

jQuery插件datatables如何使用

2023-07-04 09:07:09 124人浏览 八月长安
摘要

这篇文章主要介绍了Jquery插件datatables如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jQuery插件datatables如何使用文章都会有所收获,下面我们一起来看看吧。jQuery 的插

这篇文章主要介绍了Jquery插件datatables如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jQuery插件datatables如何使用文章都会有所收获,下面我们一起来看看吧。

jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。

如何把数据库中的数据以表格的形式展示到前端,实现有很多方法,最近用jquery的datatables插件来实现了发现还是比较简单的,今天我们来看一个例子,来说明这个插件的使用,基本原理是view函数从数据库中读出数据,jquery通过ajax获取数据并在前端展示出来,我们先定义一个models.py,如下:

from Django.dbimport modelsclass MyModel(models.Model):someAttr = models.CharField()def __unicode__(self):return self.someAttr

然后定义我们的view函数:

fromdjanGo.HttpimportHttpResponsefromdjango.coreimportserializersfrom .modelsimportMyModeldefmyModel_asJSON(request):object_list = MyModel.objects.all() json = serializers.serialize('json', object_list)return HttpResponse(json, content_type='application/json')

因为datatables接收的是json格式数据,所以从数据库中读出的数据要序列化,就是这句:

json = serializers.serialize(‘json', boject_list)

添加下url.py:

from django.conf.urlsimport patterns, urlurlpatterns = patterns('myapp.views',url(regex=r'^$',view='myModel_asJson',name='my_ajax_url'),)

最后就是模板文件内容了:

<tablecellpadding="0" cellspacing="0" border="0" id="example"><thead><tr><th>My Attr Heading</th></tr></thead><tbody></tbody></table><scripttype="text/javascript" language="javascript" class="init">$(document).ready(function() {$('#example').dataTable( {"processing": true,"ajax": {"processing": true,"url": "{% url 'my_ajax_url' %}","dataSrc": ""},"columns": [{ "data": "fields.someAttr },{ "data": "pk" }]} );} );</script>

其中url指定你的view函数名称,columns指定要显示的列,这样数据就以表格的形式展示出来了,要想美观记得自己要上样式,推荐bootstrap,datatables是一次把数据全部加载到前端来处理,所以如果你加载的条目非常多,就会有停顿感,必须要加上bServierSide参数。

关于“jQuery插件datatables如何使用”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“jQuery插件datatables如何使用”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注编程网精选频道。

--结束END--

本文标题: jQuery插件datatables如何使用

本文链接: https://www.lsjlt.com/news/344096.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • jQuery插件datatables如何使用
    这篇文章主要介绍了jQuery插件datatables如何使用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇jQuery插件datatables如何使用文章都会有所收获,下面我们一起来看看吧。jQuery 的插...
    99+
    2023-07-04
  • jQuery表格插件datatables用法详解
    DataTables是一个强大的jQuery表格插件,可以帮助我们在网站上创建交互性的表格。以下是DataTables的用法详解:1. 引入jQuery和DataTables的相关文件。在HTML文件的``标签中添加以下代码:```ht...
    99+
    2023-08-09
    jQuery
  • jquery如何使用skitter插件
    小编给大家分享一下jquery如何使用skitter插件,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!下载地址:http://w...
    99+
    2022-10-19
  • jquery插件Jplayer如何使用
    本篇内容介绍了“jquery插件Jplayer如何使用”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!现在从需求上来了解它的使用方法吧。第一个...
    99+
    2023-07-04
  • 如何使用jQuery表单验证插件和日历插件
    这篇文章主要为大家展示了“如何使用jQuery表单验证插件和日历插件”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用jQuery表单验证插件和日历插件”这...
    99+
    2022-10-19
  • jQuery中validate插件如何用
    这篇文章主要介绍“jQuery中validate插件如何用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“jQuery中validate插件如何用”文章能帮助大家解决...
    99+
    2022-10-19
  • jQuery中如何使用tip提示插件
    小编给大家分享一下jQuery中如何使用tip提示插件,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!效果图:代码如下:<!DOCTYPE html> <html...
    99+
    2022-10-19
  • AngularJS中如何使用jQuery的zTree插件
    这篇文章主要介绍了AngularJS中如何使用jQuery的zTree插件的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇AngularJS中如何使用jQuery的zTree插件文章都会有所收获,下面我们一起来看...
    99+
    2023-07-04
  • Jquery插件ThickBox怎么使用
    使用ThickBox插件可以在网页中创建一个弹出式的模态框,用于显示图片、网页内容或者是内嵌的视频。以下是使用ThickBox的步骤...
    99+
    2023-08-18
    Jquery ThickBox
  • jQuery插件ajaxFileUpload使用详解
    jQuery插件ajaxFileUpload是一个用于实现文件上传功能的插件。使用该插件可以通过AJAX方式将文件上传到服务器,并且...
    99+
    2023-08-17
    jQuery
  • jquery如何定义插件
    在jquery中定义插件的方法:1.新建html项目,引入jquery;2.使用$.extend(object)和$.fn.extend(object)方法定义插件;具体步骤如下:首先,新建一个html项目,并在项目中引入jquery;&l...
    99+
    2022-10-04
  • 如何开发jQuery插件
    今天小编给大家分享一下如何开发jQuery插件的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。jQuery是javascrip...
    99+
    2023-06-26
  • jQuery插件jQuery Templates怎么用
    本篇文章给大家分享的是有关jQuery插件jQuery Templates怎么用,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。我们知道微软早已...
    99+
    2022-10-19
  • 如何使用JQuery自动完成插件Auto Complete
    这篇文章将为大家详细讲解有关如何使用JQuery自动完成插件Auto Complete,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。问题当你查找一些特殊的东西,当你输入准...
    99+
    2022-10-19
  • jQuery插件之artDialog怎么使用
    要使用artDialog插件,你需要先引入jQuery库和artDialog插件的JS和CSS文件。1. 首先,在你的HTML页面中...
    99+
    2023-09-15
    jQuery artDialog
  • 怎么使用jQuery Data Linking插件
    这篇文章主要介绍“怎么使用jQuery Data Linking插件”,在日常操作中,相信很多人在怎么使用jQuery Data Linking插件问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方...
    99+
    2022-10-19
  • jquery seat charts插件怎么使用
    本文小编为大家详细介绍“jquery seat charts插件怎么使用”,内容详细,步骤清晰,细节处理妥当,希望这篇“jquery seat charts插件怎么使用”文章能帮助大家解决疑惑,下面跟着小编...
    99+
    2022-10-19
  • jquery分页插件怎么使用
    要使用jQuery分页插件,你需要按照以下步骤进行操作:1. 引入jQuery库文件和分页插件的JS文件。```html```2. ...
    99+
    2023-08-09
    jquery
  • jQuery如何实现validata插件
    这篇文章将为大家详细讲解有关jQuery如何实现validata插件,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。为了打LOL,我写快点,代码我都复制在最下面了,并且写了...
    99+
    2022-10-19
  • vue如何引入jquery插件
    本篇内容介绍了“vue如何引入jquery插件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!   首先来...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作