jQuery 플러그인 데이터 테이블 사용 tutorial_jquery

jQuery의 플러그인 dataTables는 테이블 정렬, 브라우저 페이징, 서버 페이징, 필터링, 서식 지정 및 기타 기능을 제공하는 탁월한 테이블 플러그인입니다.

데이터베이스의 데이터를 테이블 형태로 프런트 엔드에 표시하는 방법은 여러 가지가 있습니다. 최근 jquery의 데이터 테이블 플러그인을 사용하여 구현해 보니 비교적 간단합니다. 오늘은 이 플러그인의 사용을 설명하기 위해 예제를 살펴보겠습니다. 기본 원리는 보기 기능이 데이터베이스에서 데이터를 읽고, 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')

데이터 테이블은 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은 보기 함수의 이름을 지정하고, 열은 표시할 열을 지정하므로 데이터가 테이블 형식으로 표시되도록 하려면 부트스트랩 스타일을 직접 지정하세요. 권장하며, datatables가 모든 데이터를 한번에 로드하기 때문에 프런트엔드에서 처리하기 때문에 많은 항목을 로드할 경우에는 일시정지가 발생하며, bServierSide 매개변수를 추가해야 합니다.

편집자가 여기에서 jQuery 플러그인 데이터 테이블 사용 튜토리얼을 소개할 것입니다. 도움이 되길 바랍니다.