jquery Plugin DataTables Use tutorial _jquery

The JQuery plug-in DataTables is an excellent form plugin that provides the ability to sort tables, browser pagination, server paging, filtering, formatting, and more.

How to put the data in the database in the form of table to the front end, there are many methods, the recent use of jquery DataTables plug-in to achieve the discovery or relatively simple, today we look at an example to illustrate the use of this plug-in, the basic principle is the view function from the database read the data, jquery gets the data through Ajax and shows it on the front end, we first define a models.py, as follows:

From Django.dbimport Models
class MyModel (models. Model):
someattr = models. Charfield ()
def __unicode__ (self): return
self.someattr

Then define our view function:

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 ')

Because DataTables receives JSON-formatted data, the data read from the database is serialized, which is the sentence:

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

Add Next url.py:

From django.conf.urlsimport patterns, url
urlpatterns = patterns (' myapp.views ',
url (regex=r ' ^$ ',
view= ') Mymodel_asjson ',
name= ' My_ajax_url '),

The last is the template file content:

<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>

Where the URL specifies the name of your view function, columns specifies the column to display, so that the data is displayed in tabular form, to be beautiful remember to style, recommend Bootstrap,datatables is a data load all the way to the front-end to deal with, So if you load a lot of items, there will be a pause, you have to add bservierside parameters.

About the jquery plugin DataTables tutorial Small series on the introduction to everyone here, I hope to help you!