1,路由

  1. #主页面路由
  2. re_path('article/article_list/', article.article_list,name='article/article_list/'),
  3. #分页面路由
  4. re_path('article/list_part/', article.list_part,name='article/list_part/'),

2,前端主页面html

  1. #引用的js
  2. <script src="/static/jQuery-1.8.2.min.js"></script>
  3.  
  4. #查询表单
  5. <form id="searchlist">
  6. {% csrf_token %}
  7. <ul class="seachform">
  8.  
  9. <li><label>标题</label><input name="article_title" type="text" class="scinput"/></li>
  10. <li><label>是否推荐</label>
  11. <div class="vocation">
  12. <select class="select3" name="article_is_recommend">
  13. <option value="">请选择</option>
  14. <option value="">推荐</option>
  15. <option value="">不推荐</option>
  16. </select>
  17. </div>
  18. </li>
  19. <li><label>是否审核</label>
  20. <div class="vocation">
  21. <select class="select3" name="article_auditor">
  22. <option value="">请选择</option>
  23. <option value="">未审核</option>
  24. <option value="">审核通过</option>
  25. </select>
  26. </div>
  27. </li>
  28.  
  29. <li><label>作者</label>
  30. <div class="vocation">
  31. <select class="select3" name="member_id">
  32. <option value="">请选择</option>
  33. {% for v in member_list %}
  34.  
  35. <option value="{{ v.member_id }}">{{ v.member_name }}</option>
  36. {% endfor %}
  37. </select>
  38. </div>
  39. </li>
  40.  
  41. <li><label>&nbsp;</label><input name="" type="button" class="scbtn" value="查询" id="search"/></li>
  42. <li><label>&nbsp;</label><input type="button" value="删除所选文章" id="del_list" class="scbtn"></li>
  43.  
  44. </ul>
  45.  
  46. </form>
  47.  
  48. #文章表
  49. <form onsubmit="return false" id="del">
  50. <table class="tablelist">
  51. <thead>
  52. <tr>
  53. <th><input name="checkall" type="checkbox" value="" id="checkAll">全选</th>
  54. <th>文章序号<i class="sort"><img src="/static/back/images/px.gif"/></i></th>
  55. <th>文章标题</th>
  56. {#
  57. <th>文章简介</th>
  58. #}
  59. <th>添加时间</th>
  60. <th>阅读量</th>
  61. <th>点赞量</th>
  62. <th>是否推荐</th>
  63. <th>作者</th>
  64.  
  65. <th>是否审核</th>
  66. <th>操作</th>
  67. </tr>
  68. </thead>
  69.  
  70. {% csrf_token %}
  71. <tbody class="maina">
  72.  
  73. </tbody>
  74.  
  75. </table>
  76.  
  77. </form>

3,前端主页面js。

  1. <script>
  2. //首次页面加载,通过ajax拿到数据,放在maina容器里
  3. show_list();
  4.  
  5. function show_list() {
  6. $.post("{% url 'back:article/list_part/' %}", $('#searchlist').serialize(), function (data) {
  7. $(".maina").html(data);
  8. });
  9. }
  10.  
  11. //点击分页,点击a连接:
  12. $(document).on('click', '.pagin a', function () {
  13. $.post(this.href, $('#searchlist').serialize(), function (data) {
  14. $(".maina").html(data);
  15. });
  16. return false;//让a连接失效
  17. });
  18.  
  19. //点击删除
  20. $(document).on('click', '.del', function () {
  21. _this = this;
  22. layer.confirm('您确定要删除吗?', {
  23. btn: ['确定', '取消']
  24. }, function () {
  25. id = $(_this).parent().data("id");
  26. $.post("{% url 'back:article/list_delete/' %}", {
  27. "id": id,
  28. "csrfmiddlewaretoken": "{{ csrf_token }}"
  29. }, function (data) {
  30. if (data.status == 1) {
  31. layer.msg(data.info, function () {
  32. $(_this).parent().parent().remove();
  33. });
  34.  
  35. } else {
  36. layer.msg(data.info);
  37. }
  38. }, 'json');
  39. }, function () {
  40. });
  41. return false;//让a连接失效
  42. });
  43.  
  44. //点击查询按钮
  45. $(document).on('click', '#search', function () {
  46. show_list();
  47. });
  48.  
  49. {# 设为推荐#
  50. }
  51. $(document).on('click', '.recommend', function () {
  52. __this = this;
  53. layer.confirm('特别推荐显示前三篇文章,是否修改数据?', {
  54. btn: ['确定', '取消']
  55. }, function () {
  56. vals = $(__this).data("val");
  57. $.post("/back/article/article_is_recommend/", {
  58. "id": vals,
  59. "csrfmiddlewaretoken": "{{ csrf_token }}"
  60. }, function (data) {
  61. if (data.status == 0) {
  62. layer.msg(data.info, function () {
  63.  
  64. });
  65.  
  66. } else {
  67. layer.msg(data.info);
  68. }
  69. }, 'json');
  70. }, function () {
  71. });
  72. {#return false;//让a连接失效#}
  73. }
  74. );
  75. {# 审核#
  76. }
  77. $(document).on('click', '#go', function () {
  78. layer.msg('点击查看文章后返回文章列表确认是否通过审核.')
  79. });
  80. $(document).on('click', '.auditor', function () {
  81. __this = this;
  82. layer.confirm('是否确认修改文章状态?', {
  83. btn: ['确定', '取消']
  84. }, function () {
  85. valuse = $(__this).data("auditor");
  86. $.post("/back/article/article_auditor/", {
  87. "id": valuse,
  88. "csrfmiddlewaretoken": "{{ csrf_token }}"
  89. }, function (data) {
  90. if (data.status == 0) {
  91. layer.msg(data.info, function () {
  92.  
  93. });
  94.  
  95. } else {
  96. layer.msg(data.info);
  97. }
  98. }, 'json');
  99. }, function () {
  100. });
  101. {#return false;//让a连接失效#}
  102. }
  103. );
  104.  
  105. {# 批量删除#
  106. }
  107. {# 全选全不选#
  108. }
  109. $(document).on('click', 'input[name="checkall"]', function () {
  110. $('input[name="chk[]"]').prop('checked', $('input[name="checkall"]').prop('checked'))
  111. });
  112. $(document).on('click', 'input[name="chk[]"]', function () {
  113. $('input[name="checkall"]').prop('checked', !$('input[name="chk[]"]:not(:checked)').length)
  114. });
  115. $(document).on('click', '#del_list', function () {
  116. layer.confirm('是否确认删除所选文章?', {
  117. btn: ['确定', '取消']
  118. }, function () {
  119. $.post('/back/article/article_del/', $('#del').serialize(), function (data) {
  120. if (data['status'] == 0) {
  121. layer.msg(data['info'])
  122. } else {
  123. layer.msg(data['info'])
  124. }
  125. }, 'json')
  126. })
  127. })
  128. </script>

4,主页面后台方法。

  1. # 文章列表
  2. def article_list(request):
  3. member_list = Member.objects.all()
  4. return render(request,'article/article_list.html',locals())

5,前端分页面html。

  1. {% for v in articles_list %}
  2. <tr>
  3. <td><input name="chk[]" type="checkbox" value="{{ v.article_id }}"></td>
  4. <td>{{ forloop.counter }}</td><!--编号-->
  5. <td>{{ v.article_title }}</td>
  6. <td>{{ v.article_addtime }}</td>
  7. <td>{{ v.article_clicknum }}</td>
  8. <td>{{ v.article_praise_num }}</td>
  9. <td>
  10. {% if v.article_is_recommend == 1 %}
  11. 推荐&nbsp;&nbsp;
  12. <a href="javascript:;" data-val="{{ v.article_id }}" style="color: #440044;" class="recommend">
  13. >>设为不推荐</a>
  14. {% else %}
  15. 不推荐&nbsp;&nbsp;
  16. <a href="javascript:;" data-val="{{ v.article_id }}" style="color: #440044;" class="recommend">
  17. >>设为推荐</a>
  18. {% endif %}
  19. </td>
  20. <td>{{ v.member.member_name }}</td>
  21. <td>
  22. {% if not v.article_auditor %}
  23. 审核通过
  24. &nbsp;&nbsp;&nbsp;&nbsp;
  25. <a href="javascript:;" style="color: purple;" data-auditor="{{ v.article_id }}" class="auditor">
  26. >>屏蔽此文章</a>
  27. {% else %}
  28. <a href="javascript:;" style="color: #0b2e13;" id="go">去审核</a>
  29. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  30. <a href="javascript:;" style="color: purple;" data-auditor="{{ v.article_id }}" class="auditor">
  31. >>通过审核</a>
  32. {% endif %}
  33. </td>
  34. <td data-id="{{ v.article_id }}"><a href="/blog/single-post/{{ v.article_id }}/" class="tablelink">查看</a> <a
  35. href="javascript:;" class="tablelink del"> 删除</a></td>
  36. </tr>
  37. {% endfor %}
  38. <tr>
  39. <td colspan="">
  40. <div class="pagin">
  41. <div class="message">共<i class="blue">{{ num }}</i>条记录,当前显示第&nbsp;<i
  42. class="blue">{{ currentPage }}&nbsp;</i>页
  43. </div>
  44. <ul class="paginList">
  45. {% if articles_list.has_previous %}
  46. <li class="paginItem"><a
  47. href="/back/article/list_part/?page={{ articles_list.previous_page_number }}"><span
  48. class="pagepre"></span></a></li>
  49. {% endif %}
  50. {% for num in pageRange %}
  51. <li class="paginItem {% if num == currentPage %}current{% endif %}"><a
  52. href="/back/article/list_part/?page={{ num }}">{{ num }}</a></li>
  53. {% endfor %}
  54. {% if articles_list.has_next %}
  55. <li class="paginItem"><a
  56. href="/back/article/list_part/?page={{ articles_list.next_page_number }}"><span
  57. class="pagenxt"></span></a></li>
  58. {% endif %}
  59. </ul>
  60. </div>
  61. </div>
  62.  
  63. </td>
  64.  
  65. </tr>

6,分页面后台方法。

  1. #用到的封装查找函数
  2. from blog.utils import function
  3. # 文章part
  4. def list_part(request):
  5. where=function.getWhere(request)
  6. articles_list=Article.objects.filter(**where).all().order_by('-article_id')
  7. num=len(articles_list)
  8. currentPage=int(request.GET.get('page',1)) #获取当前在第几页
  9. paginator=Paginator(articles_list,10)
  10.  
  11. if paginator.num_pages>11:
  12. if currentPage-5<1:
  13. pageRange=range(1,11)
  14. elif currentPage+5>paginator.num_pages:
  15. pageRange = range(currentPage-5, paginator.num_pages+1)
  16. else:
  17. pageRange = range(currentPage - 5,currentPage+5)
  18. else:
  19. pageRange = range(1,paginator.num_pages+1)
  20.  
  21. try:
  22. articles_list=paginator.page(currentPage)
  23. except PageNotAnInteger:
  24. articles_list = paginator.page(1)
  25. except EmptyPage:
  26. articles_list = paginator.page(paginator.num_pages)
  27. return render(request,'article/article_list_part.html',locals())

7,分页面中用到的封装函数

  1. # 文章查找
  2. def getWhere(request):
  3. where = dict()
  4. article_title=request.POST.get('article_title','')
  5. article_is_recommend = request.POST.get('article_is_recommend', '')
  6. member_id = request.POST.get('member_id', '')
  7. article_auditor = request.POST.get('article_auditor','')
  8. if article_title:
  9. where['article_title__icontains']=article_title
  10. if article_is_recommend!='':
  11. where['article_is_recommend'] = article_is_recommend
  12. if member_id:
  13. where['member'] = member_id
  14. if article_auditor !='':
  15. where['article_auditor'] = article_auditor
  16. print(where)
  17. return where

8,页面效果。

done。

django项目中的ajax分页和条件查询。的更多相关文章

  1. [翻译]在Django项目中添加谷歌统计(Google Analytics)

    原文:<Google Analytics tracking code into Django projects, the easy way> 对我来说,制作一个可扩展的Django应用随时 ...

  2. 项目中的一个分页功能pagination

    项目中的一个分页功能pagination <script> //总页数 ; ; //分页总数量 $(function () { // $("#pagination"). ...

  3. celery 分布式异步任务框架(celery简单使用、celery多任务结构、celery定时任务、celery计划任务、celery在Django项目中使用Python脚本调用Django环境)

    一.celery简介: Celery 是一个强大的 分布式任务队列 的 异步处理框架,它可以让任务的执行完全脱离主程序,甚至可以被分配到其他主机上运行.我们通常使用它来实现异步任务(async tas ...

  4. 项目中关于ajax jsonp的使用

    项目中关于ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法总算搞定了,记录一下 function TestAjax() {    $.ajax({       ...

  5. Struts2项目中使用Ajax报错

    在Struts2项目中使用Ajax向后台请求数据,当添加了json-lib-2.3-jdk15.jar和struts2-json-plugin-2.3.4.1.jar两个包时,在result中配置ty ...

  6. Django项目中使用Redis

    Django项目中使用Redis DjangoRedis 1 redis Redis 是一个 key-value 存储系统,常用于缓存的存储.django-redis 基于 BSD 许可, 是一个使 ...

  7. 擦他丫的,今天在Django项目中引用静态文件jQuery.js 就是引入报错,终于找到原因了!

    擦 ,今天在Django项目中引用静态文件jQuery.js 就是引入报错,终于找到原因了! 问题在于我使用的谷歌浏览器,默认使用了缓存,导致每次访问同一个url时,都返回的是缓存里面的东西.通过谷歌 ...

  8. django 项目中使用多数据库 multiple databases

    假如在一个django项目中使用到了不只一个数据库, 其实这在大一点的工程中很常见,比如主从库 那么会涉及到如下一些东西 1, 定义 在settings中的DATABASE中定义会使用到的数据,比如除 ...

  9. django 项目中的 favicon.ico 处理

    django 项目中的 favicon.ico 处理  (django == 2.0.6) 1. 引入模块: from django.views.generic.base import Redirec ...

随机推荐

  1. A1041 Be Unique (20 分)

    一.技术总结 这题在思考的时候遇见了,不知道怎么处理输入顺序问题,虽然有记录每个的次数,事后再反过来需要出现一次的且在第一次出现, 这时我们其实可以使用另一个数组用来存储输入顺序的字符,然后再用另一个 ...

  2. (十一)golang--键盘输入

    两种方式:fmt.Scanln()和fmt.Scanf() (1)fmt.Scanln package main import "fmt" func main() { //获取一行 ...

  3. Extra:Variable Types

    文章著作权归作者所有.转载请联系作者,并在文中注明出处,给出原文链接. 本系列原更新于作者的github博客,这里给出链接. 在我们使用Cg或者HLSL进行shader编写的过程中,常常涉及到一些变量 ...

  4. Centos 7.6搭建Skywalking6.5+es6.2.4

    软件包版本1.elasticsearch-6.2.4.tar.gz,下载地址:https://artifacts.elastic.co/downloads/elasticsearch/elastics ...

  5. java 中遍历Map的几种方法

    方法分为两类: 一类是基于map的Entry:map.entrySet(); 一类是基于map的key:map.keySet() 而每一类都有两种遍历方式: a.利用迭代器 iterator: b.利 ...

  6. golang --os系统包

    环境变量 Environ 获取所有环境变量, 返回变量列表 func Environ() []string package main import ( "fmt" "os ...

  7. 深入V8引擎-默认Platform之mac篇(1)

    又到了常规的堆砌代码凑文章字数环节,很多API我就直接贴官方的英文释义,个人翻译其实有时候并不是很准确,搞错了甚至会误导,还是尽量自己去理解. 首先看看入口方法. std::unique_ptr< ...

  8. 用友U9 基础使用文件所在目录

    元数据存主位置 D:\yonyou\UBFV50\U9.VOB.Product.Metadata 日志文件位置 D:\yonyou\U9V50\Portal\log UI热插支持文件 D:\yonyo ...

  9. web api对接小程序基本签名认证

    using BMOA.Application.System; using BMOA.Common; using BMOA.Web.Models; using Newtonsoft.Json; usin ...

  10. Python基础9

    Anacanda软件内更新的方法,而不是每次重装整个软件, 整体更新,省时省力. 但仍要掌握单个包更新的方法.