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

WBOY
풀어 주다: 2016-05-16 15:04:35
원래의
1256명이 탐색했습니다.

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 플러그인 데이터 테이블 사용 튜토리얼을 소개할 것입니다. 도움이 되길 바랍니다.

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿