jQuery プラグインのデータテーブルの使用法tutorial

jQuery プラグインのデータテーブルの使用法tutorial_jquery

WBOY

リリース： 2016-05-16 15:04:35

オリジナル

1233 人が閲覧しました

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

ログイン後にコピー

次にビュー関数を定義します:

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 はビュー関数の名前を指定し、columns は表示する列を指定します。これにより、データがテーブル形式で表示されます。美しくしたい場合は、Bootstrap でスタイルを設定することを忘れないでください。が推奨され、datatables はすべてのデータを一度にロードします。そのため、多くのエントリをロードすると一時停止の感覚が生じるため、bServierSide パラメータを追加する必要があります。

エディターがここで jQuery プラグインのデータテーブルの使用方法のチュートリアルを紹介しますので、お役に立てれば幸いです。