0

I am having tough time implementing dataTables for pagination. Can someone provide a working example for the problem? I am new for implementing jquery/javascript and learning it by reading examples. Below js script is working for doing other tasks on the same page but I am stuck in implementing this pagination here.

My view is

def ajax_load_questions(request):
    all_questions = Questions.objects.all()
    classroom = request.GET.get('classroom')
    topics = request.GET.getlist('topics_all[]')
    difficulty = request.GET.getlist('difficulty[]')
    subtopics = request.GET.getlist('subtopics_all[]')
    filter1 = all_questions.filter(classroom=classroom).filter(topic__id__in=topics)
    questions_list = filter1.filter(subtopic__id__in=subtopics).filter(difficulty__in=difficulty)

    response_questions = {}
    try:
        response_questions['questions'] = list(questions_list)
    except:
        response_questions['error'] = "No questions available"

    return JsonResponse(response_questions)

My html file is

<form method="post" id="questionForm" filter-question-url="{% url 'qapp:ajax_load_questions' %}" novalidate>
    {% csrf_token %}
    <table>
        {{form.as_table}}
    </table>
    <br>
    <button id="id_filter_button" type="button">Filter</button>
    <hr>
    <p>Questions</p>

    <div id="id_questions_list">
    </div>
    <hr>
    <button type="submit">Submit</button>
</form>

Table I want to show pagination for

<table border="1" id="id_question_table">
  <thead>
    <tr>
      <th>Questions</th>
      [other fields]
    </tr>
  </thead>
  <tbody>
    {% for que in questions_list %}
      <tr>
        <td>{{que.question}}</td>
        [other fields]
      </tr>
    {% endfor %}
  </tbody>
</table>

js Script for getting other data on the same page

$.ajax({
  url: url,
  data: {'classroom':classroomId, 'difficulty':difficulty_list,
        'topics_all':myTopics, 'subtopics_all':mySubtopics},
  success: function (data) {
    $('#id_questions_list').html(data) // I guess this has to be changed but don't know how 
    }
});

I am really stuck on this for two days and will appreciate if someone could help.

sgauri
  • 694
  • 8
  • 18
  • So you need to set the dataType to 'json' so that the returned data is given as a javascript object. You can try simply replacing ajax with getJSON. http://api.jquery.com/jquery.getjson/ – hwhite4 Feb 28 '18 at 06:15
  • but how do I use that data for pagination in dataTable? – sgauri Feb 28 '18 at 06:20
  • So do you want that table to be split up into pages? Have you looked at the django paginator? https://docs.djangoproject.com/en/2.0/topics/pagination/ – hwhite4 Feb 28 '18 at 07:37
  • Yes, I have tried [this](https://stackoverflow.com/questions/39727698/how-to-re-render-django-template-code-on-ajax-call/39744870#39744870) example, but it is reloading the page. Which creates problem for my other js outputs on the page. After trying this example I have come to dataTable. – sgauri Feb 28 '18 at 07:42

0 Answers0