Django框架之Ajax分页器

Posted yuanlianghong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Django框架之Ajax分页器相关的知识,希望对你有一定的参考价值。

一、MTV与MVC

MTV模型(django):
      M:模型层(models.py)
      T:templates
      V:views
MVC模型:
      M:模型层(models.py)
      V:视图层views.py
      C:控制器(Controller) urls.py
        
本质:django的MTV也是MVC

二、多对多表的三种创建方式

1.django orm自动创建

class Book(models.Model):
    name = models.CharField(max_length=32)
    authors = models.ManyToManyField(to=Author)

class Author(models.Model):
     name = models.CharField(max_length=32)

2.手动创建第三张表(能添加字段,不能使用ORM查询)

class Book(models.Model):
    name = models.CharField(max_length=32)

class Author(models.Model):
     name = models.CharField(max_length=32)

class Book2Author(models.Model):
    book = models.ForeignKey(to=Book)
    author = models.ForeignKey(to=Author)
    info = models.CharField(max_length=32)

3.半自动创建第三张表(可扩展性高,并且能够符合orm查询)

class Book(models.Model):
    name = models.CharField(max_length=32)
    authors = models.ManyToManyField(
        to=Author,through=Book2Author,through_fields=(book,author))

class Author(models.Model):
    name = models.CharField(max_length=32)
  # book = models.ManyToManyField(
  #          to=‘Book‘,through=‘Book2Author‘,through_fields=(‘author‘,‘book‘))

class Book2Author(models.Model):
    book = models.ForeignKey(to=Book)
    author = models.ForeignKey(to=Author)
    info = models.CharField(max_length=32)

三、前后端传输数据编码格式(contentType)

1.urlencoded

   对应的数据格式:name=jason&password=666

   后端获取数据:request.POST

   django会将urlencoded编码的数据解析自动放到request.POST

2.formdata

   form表单传输文件的编码格式

   后端获取文件格式数据:request.FILES

   后端获取普通键值对数据:request.POST

3.application/json

   ajax发送json格式数据

   注意:编码与数据格式要一致

四、Ajax

1.Ajax简介及数据传输实例

AJAX = Asynchronous javascript and XML(异步的 JavaScript 和 XML)

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。

<script>
//ajax传输json格式数据
$(#d1).click(function () 
                   $.ajax(
                       url:‘‘,  // url参数可以不写,默认就是当前页面打开的地址
                       type:post,
                       contentType:application/json,  //数据与编码要对应
                       data:JSON.stringify(name:jason,hobby:study),
                       success:function (data) 
                   )
                );
</script>     
技术图片
<script>
$(#d1).click(function () 
                   let formdata = new FormData();
                   // FormData对象不仅仅可以传文件还可以传普通的键值对
                    formdata.append(name,jason);
                    // 获取input框存放的文件
                    //$(‘#i1‘)[0].files[0]
                    formdata.append(myfile,$(#i1)[0].files[0]);
                    $.ajax(
                        url:‘‘,
                        type:post,
                        data:formdata,
                        // ajax发送文件需要修改两个固定的参数
                        processData:false,  // 告诉浏览器不要处理数据
                        contentType:false,  // 不要用任何的编码,就用formdata自带的编码格式,django能够自动识别改formdata对象
                        // 回调函数
                        success:function (data) 
                            alert(data)
                        
                    )
                );
</script>
Ajax传输文件

2.form表单与ajax异同点

form表单不支持异步提交局部刷新

form表单不支持传输json格式数据

form表单与ajax默认传输数据的编码格式都是urlencoded

五、批量插入数据(bulk_create)

l = []
for i in range(10000):
    l.append(models.Book2(name=第%s本书%i))
    models.Book2.objects.bulk_create(l)  # 批量插入数据

六、自定义分页器

技术图片
class Pagination(object):
    def __init__(self,current_page,all_count,per_page_num=2,pager_count=11):
        """
        封装分页相关数据
        :param current_page: 当前页
        :param all_count:    数据库中的数据总条数
        :param per_page_num: 每页显示的数据条数
        :param pager_count:  最多显示的页码个数
        
        用法:
        queryset = model.objects.all()
        page_obj = Pagination(current_page,all_count)
        page_data = queryset[page_obj.start:page_obj.end]
        获取数据用page_data而不再使用原始的queryset
        获取前端分页样式用page_obj.page_html
        """
        try:
            current_page = int(current_page)
        except Exception as e:
            current_page = 1

        if current_page <1:
            current_page = 1

        self.current_page = current_page

        self.all_count = all_count
        self.per_page_num = per_page_num


        # 总页码
        all_pager, tmp = divmod(all_count, per_page_num)
        if tmp:
            all_pager += 1
        self.all_pager = all_pager

        self.pager_count = pager_count
        self.pager_count_half = int((pager_count - 1) / 2)

    @property
    def start(self):
        return (self.current_page - 1) * self.per_page_num

    @property
    def end(self):
        return self.current_page * self.per_page_num

    def page_html(self):
        # 如果总页码 < 11个:
        if self.all_pager <= self.pager_count:
            pager_start = 1
            pager_end = self.all_pager + 1
        # 总页码  > 11
        else:
            # 当前页如果<=页面上最多显示11/2个页码
            if self.current_page <= self.pager_count_half:
                pager_start = 1
                pager_end = self.pager_count + 1

            # 当前页大于5
            else:
                # 页码翻到最后
                if (self.current_page + self.pager_count_half) > self.all_pager:
                    pager_end = self.all_pager + 1
                    pager_start = self.all_pager - self.pager_count + 1
                else:
                    pager_start = self.current_page - self.pager_count_half
                    pager_end = self.current_page + self.pager_count_half + 1

        page_html_list = []
        # 添加前面的nav和ul标签
        page_html_list.append(‘‘‘
                    <nav aria-label=‘Page navigation>‘
                    <ul class=‘pagination‘>
                ‘‘‘)
        first_page = <li><a href="?page=%s">首页</a></li> % (1)
        page_html_list.append(first_page)

        if self.current_page <= 1:
            prev_page = <li class="disabled"><a href="#">上一页</a></li>
        else:
            prev_page = <li><a href="?page=%s">上一页</a></li> % (self.current_page - 1,)

        page_html_list.append(prev_page)

        for i in range(pager_start, pager_end):
            if i == self.current_page:
                temp = <li class="active"><a href="?page=%s">%s</a></li> % (i, i,)
            else:
                temp = <li><a href="?page=%s">%s</a></li> % (i, i,)
            page_html_list.append(temp)

        if self.current_page >= self.all_pager:
            next_page = <li class="disabled"><a href="#">下一页</a></li>
        else:
            next_page = <li><a href="?page=%s">下一页</a></li> % (self.current_page + 1,)
        page_html_list.append(next_page)

        last_page = <li><a href="?page=%s">尾页</a></li> % (self.all_pager,)
        page_html_list.append(last_page)
        # 尾部添加标签
        page_html_list.append(‘‘‘
                                           </nav>
                                           </ul>
                                       ‘‘‘)
        return ‘‘.join(page_html_list)
当作第三方工具包导入使用

后端

#后端:
def booklist(request):
    book_list = models.Book2.objects.all()
    # 数据总条数
    all_count = book_list.count()
    # 当前页
    current_page = request.GET.get(page,1)
    # 示例一个分页器对象
    page_obj = my_page.Pagination(current_page=current_page,all_count=all_count)
    # 对总数据进行切片
    page_queryset = book_list[page_obj.start:page_obj.end]
    return render(request,booklist.html,locals())

前端

技术图片
//前端
<div class="col-md-8 col-md-offset-2">
            <table class="table table-hover table-bordered table-striped">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>name</th>
                    </tr>
                </thead>
                <tbody>
                    % for book in page_queryset %
                    <tr>
                        <td> book.pk </td>
                        <td> book.name </td>
                    </tr>
                    % endfor %
                </tbody>
            </table>
             page_obj.page_html|safe   //帮你渲染的是带有bootstrap样式的分页器
        </div>
View Code

 

以上是关于Django框架之Ajax分页器的主要内容,如果未能解决你的问题,请参考以下文章

Django之ajax的数据传输和分页器

Django之ajax的数据传输和分页器

Django 前后端数据传输ajax分页器

django-模型层之ajax续批量插入分页器

django-模型层之ajax续批量插入分页器

2019年6月14日 Web框架之Django_07 进阶操作(MTV与MVC多对多表三种创建方式前后端传输数据编码格式contentTypeajax自定义分页器)