SweetAler вставка упругой рамы и вкладка плагин

SweetAlert пробка

sweetalert является основанным на Bootstrap плагина , разработанным специально для поп - музыки, поп - специфического стиля и соответствующего кода может ссылаться на эту ссылку плагина скачать адрес

После открытия загруженных плагин мы должны DIST папки в статические файлы нашего проекта

Html файл импорта плагин

 {% load static %}
    <script src="{% static 'jquery/jquery.min.js' %}"></script>
    <link rel="stylesheet" href="{% static 'bootstrap-3.3.7-dist/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'dist/sweetalert.css' %}">
    <script src="{% static 'bootstrap-3.3.7-dist/js/bootstrap.min.js' %}"></script>
    <script src="{% static 'dist/sweetalert.min.js' %}"></script>

Применение: В качестве первого определения класса:

 <script>
     $('.cancel').click(function () {
        var $btn = $(this);
        swal({
                title: "你确定要删吗?",
                text: "你如果删了，你就准备好直接跑路吧!",
                type: "warning",
                showCancelButton: true,
                confirmButtonClass: "btn-danger",
                confirmButtonText: "是的，老子就要删!",
                cancelButtonText: "算了算了，不敢!",
                closeOnConfirm: false,
                closeOnCancel: false,
                showLoaderOnConfirm: true
            },
            function (isConfirm) {
                if (isConfirm) {
                    // 朝后端发送ajax请求
                    $.ajax({
                        url:'',
                        type:'post',
                        data:{'delete_id':$btn.attr('userId')},
                        success:function (data) {
                            if(data.code==1000){

                                swal("准备跑路把!", data.msg, "success");
                                // 通过DOM操作 来直接操作标签
                                $btn.parent().parent().remove()
                            }else{
                                swal("有Bug", "发什么了未知的错误!", "warning");
                            }
                        }
                    });
                } else {
                    swal("怂逼", "数据都不敢删", "error");
                }
            });
    })
    </script>

Затем использовать время, чтобы просто наследовать этот класс, соответствующий ярлык на него. Если этикетка лучше не заполнять HREF, используя Ajax, чтобы отправить данные, вы можете сделать асинхронную фиксацию. Концевые потребности задние, чтобы судить о том, что данные Аякса данных

    if request.is_ajax():
        delete_id = request.POST.get('delete_id')
        models.Book.objects.filter(id=delete_id).delete()
        back_dic = {'code':1000,'msg':'数据已经删除'}
        return JsonResponse(back_dic)

Пользовательский пейджер

Джанго вставки данных в базу данных с помощью пакета

Мы первая партия вставлено перед пейджером, чтобы увидеть некоторые данные в базе данных, существует несколько способов, чтобы вставить данные в базу данных, идея здесь заключается в первые данные в список, а затем записывает единую базу данных с данными, использованием здесь метод bulk_create Джанго.

def index(request):
    book_list = []
    for i in range(1000):
         book_list.append(models.Book(title='第%s书'%i))
    #批量插入数据,建议使用bulk_create方法
    models.Book.objects.bulk_create(book_list)

Пользовательский пейджер идея

Во-первых проверить все данные, используя функцию divmod вычисляет на странице шоу 10 страниц данных, чтобы показать, как много (всего / номер страницы, число будет увеличиваться, если больше 1),

Данные показывают, количество страниц и на каждой странице отображается следующая зависимость.

per_page_nun = 10
current_page                    start_page                      end_page
1                                   0                               10
2                                   10                              20 
3                                   20                              30
4                                   30                              40

per_page_nun = 5
current_page                    start_page                      end_page
1                                   0                               5
2                                   5                              10 
3                                   10                             15
4                                   15                              20

start_page = (current_page - 1) * per_page_num
end_page = current_page * per_page_num

Используя эту связь с контролем сколько частей данных, переданных каждому передний конец, задний конец метод отчетности записи SQL, чтобы выделить номер текущей страницы.

book_queryset = models.Book.objects.all()
一页展示的条数
per_page_num = 10
all_count = book_queryset.count()
all_page_num,more = divmod(all_count,per_page_num)
if more:
    all_page_num += 1  # 到底需要多少页面展示
    # 用户想要查看的页码
    current_page = request.GET.get('page', 1)
    current_page = int(current_page)

    start_page = (current_page - 1) * per_page_num
    end_page = current_page * per_page_num
    html = ''
    xxx = current_page
    if current_page < 6:
        xxx = 6
        for i in range(xxx-5,xxx+6):
            if current_page == i:#高亮显示当前页
                html += '<li class="active"><a href="?page=%s">%s</a></li>'%(i,i)
                else:
                    html += '<li><a href="?page=%s">%s</a></li>' % (i, i)
                    book_queryset = book_queryset[start_page:end_page]
                    return render(request, 'index.html', {'xxx':book_queryset})  # 第一种

Вкладка Пользовательские сборки

Хотя выше мы также рукописная страница несколько простых функций, но такие, как предыдущий, следующая, Home, End и поэтому мы не добавили следующие страницы, чтобы узнать о пользовательском компоненте.

Компонент Код:

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)

Нам нужно настроить:

#视图层
current_page = request.GET.get('page',1)#设置当前页，默认为1
book_queryset = models.Book.objects.all()#查出所有的数据对象
all_count = book_queryset.count()#计算出数据总数

page_obj = Pagination(current_page=current_page,all_count=all_count,per_page_num=20)
page_queryset = book_queryset[page_obj.start:page_obj.end]#这里需要设置分页

return render(request,'test.html',locals())

#test.html
 {% for user_obj in page_queryset %}#这里循环的是分页后的queryset对象
            <tr>
            <td>{{ user_obj.pk }}</td>
                <td>{{ user_obj.name }}</td>
                <td>{{ user_obj.password }}</td>
            </tr>
{% endfor %}

{{ page_obj.page_html|safe }}
需要将过滤器设置为safe模式以确保组件能够正常渲染页面