jQuery插件datatables使用教程

前端技术 2023/09/06 JavaScript

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

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

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

然后定义我们的view函数：

fromdjango.httpimportHttpResponse
fromdjango.coreimportserializers
from .modelsimportMyModel
defmyModel_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, url
urlpatterns = 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使用教程小编就给大家介绍到这里，希望对大家有所帮助！

本文地址：https://www.stayed.cn/item/16072

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案