Jquery数据表首先加载为html，然后通过ajax进行分页

Question

我正在编写已编写的代码库。我必须对表执行ajax分页。现在我们正在使用jquery数据表。当页面打开时，他们的内容被加载为html think jinja模板。

<table id="dataGrid" class="display">
<thead>
  <tr>
    {% if app_ctx.sub_nav == 'mine' or app_ctx.category == 'members' %}
        <th class="no_sort mid"><input type="checkbox" value="" name="" id="dataGrid_check_all" /></th>
    {% endif %}
    {% if app_ctx.root == 'lab' %}
    <th></th>
    {% endif %}
    <th>Access</th>
    {% for field_title in field_titles() %}
    <th>{{field_title}}</th>
    {% endfor %}
  </tr>
</thead>
<tfoot>
  <tr>
      {% if app_ctx.sub_nav == 'mine' or app_ctx.category == 'members' %}
          <th></th>
      {% endif %}
      {% if app_ctx.root == 'lab' %}
      <th></th>
      {% endif %}
      <th>Access</th>
      {% for field_title in field_titles() %}
          <th>{{field_title}}</th>
      {% endfor %}
  </tr>
</tfoot>
<tbody>
  {% for item in items %}
  <tr>
    {% if app_ctx.sub_nav == 'mine' or app_ctx.category == 'members' %}
    <td><input type="checkbox" class="item-ids" value="{{ item.id }}" /></td>
    {% endif %}

    {% if app_ctx.root == 'lab' %}
    <td><a target="_blank" href="{{ '%s/%s' % ( app_ctx.url_for('details'), item.id) }}">More...</a></td>
    {% endif %}

    <td>{% if app_ctx.sub_nav != 'mine' %}<input name="item_ids" type=hidden value="{{ item.id }}">{% endif %}
        <div style="width: 65px; display: block; overflow: auto;">{{ acl_display(item) }}</div></td>
    {% for field_value in field_values(app_ctx, item) %}
    {{field_value|safe}}
    {% endfor %}
  </tr>
  {% endfor %}
</tbody>
  </table>

我需要做的是，我只想将前十条记录加载为html，然后通过Ajax请求加载其余页面。请告诉我们如何实现这一目标。

当前的js代码

    var table = $("{{ selector }}");
    var dataTableInitOptions = {
        "sPaginationType": "full_numbers",
        "bJQueryUI": true,
        "aaSorting": {% if app_ctx and app_ctx.category == 'files' and app_ctx.sub_nav == 'mine' %}[[ 7, "desc" ]]{% else %}[[ 1, "desc" ]]{% endif %},
        "oLanguage":{
            "sSearch":"Search all columns:"
        },
        "bStateSave": true {# save search and sorting state in cookies #}
    };

    {% if init_options %}
    var additionalOptions = ({{ init_options|safe }});
    for (var i in additionalOptions) {
        dataTableInitOptions[i] = additionalOptions[i];
    }
    {% endif %}

    if (table.width() > 900) {
        dataTableInitOptions.sScrollX = 920;
        dataTableInitOptions.bScrollCollapse = true;
        //dataTableInitOptions.sScrollXInner = table.width();
    }

    dataTableInitOptions.fnInitComplete = function() {
        {% if filters and filters_placed_in_table %}{{ filters.render_filters_js() }}{% endif %}

        {# sort by Uploaded #}
        {% if app_ctx and app_ctx.category == 'files' %}
            {% if app_ctx.sub_nav == 'mine' %}
                this.fnSort( [[7,'desc']] );
            {% else %}
                this.fnSort( [[6,'desc']] );
            {% endif %}
        {% endif %}

        //move footer column filters to the top
        if ($('.dataTables_scroll').length) {
            var scrollParts = $('.dataTables_scroll').children();
            var footer = scrollParts[2],
                    body = scrollParts[1];
            scrollParts[1] = footer;
            scrollParts[2] = body;
            $('.dataTables_scroll').append(scrollParts);
        } else {
            //no scroll
            //append empty row to the header and move footer in place of that row
            $(this).css({position:'relative'});
            var footer = $('tfoot tr', $(this)).children(),
                    colNum = footer.length,
                    header = $('thead tr:first', $(this)).children();
            var widths = header.map(function(){return $(this).width()});

            $('tfoot', $(this)).css({'position':'absolute', 'top': $('thead', $(this)).height() + 'px', 'left':'0', 'right':'0'});
            $('thead', $(this)).append($('<tr></tr>').css({'height':$('tfoot', $(this)).height() + 12 + 'px'}));

            footer.each(function(i, el) { $(el).width(widths[i] + 2) });
        }
    };
    $("{{ selector }}").dataTable(dataTableInitOptions).columnFilter();