如何在select2中访问HTTP响应标头

Question

I am using the select2 to build select boxes with a lazy-appending result list . However, the pagination data (eg the total item count) is not part of the JSON response. Hence, I am unable to access them in the ajax.results function. Instead, the pagination data is part of the HTTP response headers.

Is there some kind of interception mechanism build into select2's ajax so that I can access the HTTP headers and write them into the actual result data?

Answer 1

@fynn's answer no longer works in Select2 4.x, here's an example that does.

It checks for X-Page (current page number, eg "1") and X-Total-Pages (eg "5") headers. If those aren't present it also checks for a Link header with rel=next as at https://developer.github.com/v3/#pagination

$(".js-data-example-ajax").select2({
  ajax: {
    url: '/path/to/index.json',
    dataType: 'json',
    delay: 250,
    data: function (params) {
      // Returns the query params that should be passed to the server
      return {
        q: params.term, // search term
        page: params.page
      };
    },
    transport: function(params, success, failure) {
      // Custom transport lets us get pagination info stored in the headers.
      // Check for X-Page and X-Total-Pages, and alternatively for Link rel=next
      var read_headers = function(data, textStatus, jqXHR) {
        var more;
        var current_page = parseInt(jqXHR.getResponseHeader('X-Page')) || 0;
        var total_pages = parseInt(jqXHR.getResponseHeader('X-Total-Pages')) || 0;
        var link = jqXHR.getResponseHeader('Link') || '';
        if ((current_page < total_pages) || (link.search(/<([^>]+)>;\s*rel\s*=\s*['"]?next['"]?\s*(,|$)/i) > -1)) {
          more = true;
        }
        else {
          more = false;
        }
        return {
          results: data,
          pagination: {
            more: more
          }
        };
      };
      var $request = $.ajax(params);
      $request.then(read_headers).then(success);
      $request.fail(failure);
    },
    cache: true
  }
});

Answer 2

I just solved the issue by providing a custom transport function:

transport: function(params) {
    var callback = params.success;
    params.success = function(data, textStatus, jqXHR) {
        callback({
            items: data,
            total: jqXHR.getResponseHeader('HeaderName')
        }, textStatus, jqXHR);
    };
    return $.ajax(params);
}