jQuery plug-in datatables penggunaan tutorial_jquery

DataTables pemalam jQuery ialah pemalam jadual yang sangat baik yang menyediakan pengisihan jadual, halaman penyemak imbas, halaman pelayan, penapisan, pemformatan dan fungsi lain.

Cara untuk memaparkan data dalam pangkalan data ke bahagian hadapan dalam bentuk jadual Terdapat banyak cara untuk mencapainya Baru-baru ini, saya menggunakan pemalam datatables jquery untuk merealisasikannya dan mendapati ia agak mudah. Hari ini kita akan melihat contoh untuk menggambarkan penggunaan pemalam ini, prinsip asasnya ialah fungsi pandangan membaca data daripada pangkalan data, jquery memperoleh data melalui ajax dan memaparkannya pada bahagian hadapan models.py, seperti berikut:

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

Kemudian tentukan fungsi paparan kami:

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

Oleh kerana jadual data menerima data dalam format json, data yang dibaca daripada pangkalan data mesti bersiri, iaitu ayat ini:

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

Tambahkan url.py berikut:

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

Yang terakhir ialah kandungan fail templat:

<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 menentukan nama fungsi paparan anda, dan lajur menentukan lajur yang akan dipaparkan, supaya data dipaparkan dalam bentuk jadual Jika anda mahu ia cantik, ingat untuk menggayakannya sendiri adalah disyorkan, dan jadual data memuatkan semua data sekali gus Bahagian hadapan mengendalikannya, jadi jika anda memuatkan banyak entri, akan ada rasa jeda, dan parameter bServierSide mesti ditambah.

Editor akan memperkenalkan anda kepada tutorial penggunaan jadual data pemalam jQuery di sini, saya harap ia akan membantu anda!