JQuery JSON загрузка данных, а так же последующая сортировка

161
25 марта 2018, 20:23

Есть JQuery Plguin, который загружет JSON файл с данными и выводит их. В плагине присутствуют такие функции как загрузить больше данных и удаление кнопки "показать больше".

;(function ($, window, document, undefined) {
var pluginName = "loadJSON",
    dataKey = "plugin_" + pluginName;
var Plugin = function (element, options) {
    this.element = element;
    this.self = this;
    this.$element = $(element);
    this.metadata = this.$element.data("options");
    this.options = $.extend({}, $.fn[pluginName].default, this.metadata, options);
    this.data = [];
    this.firstLoad = [];
    this.options = {
        limit: 5,
        loadItem: 5,
        loadBtn: '#more',
        sortNews: '',
        getData: function(element, data) {
            alert("Please create getData function, data available: " + data.length);
            return false;
        }
    };
    this.init(options);
};
Plugin.prototype = {
    init: function (options) {
        var self = this;
        $.extend(this.options, options);
        console.log('self.data[0].length:'+self.options.url);
        $.ajax({
            method: 'GET',
            url: self.options.url,
            dataType: 'json',
            success: function(data, msg) {
                self.data.push(data);
                if (self.data[0].length <= self.options.limit) {
                   self.out();
                } else {
                   self.more();
                }
                self.firstLoad.push(self.data[0].splice(0, self.options.limit));
                self.options.getData(self.elem, self.firstLoad[0]);
            },
            error: function(msg) {
                alert(msg.statusText);
            }
        });
    },
    more: function(name) {
      var self = this;
      var i = 0;
      $(self.options.loadBtn).click(function() {
          i += 1;
          if (self.data[0].length) {
              self.firstLoad.push(self.data[0].splice(0, self.options.loadItem));
              self.options.getData(self.elem, self.firstLoad[i]);
          }
          if (self.data[0].length == 0) {
              self.out();
          }
      })
    },
    out: function(name) {
        var self = this;
        $(self.options.loadBtn).remove();
    },
    refresh: function(name) {
        var self = this;
        console.log('self.options.url:'+self.options.url);
    }
};
/*
 * Plugin wrapper, preventing against multiple instantiations and
 * return plugin instance.
 */
$.fn[pluginName] = function (options) {
    var plugin = this.data(dataKey);
    // has plugin instantiated ?
    if (plugin instanceof Plugin) {
        // if have options arguments, call plugin.init() again
        if (typeof options !== 'undefined') {
            plugin.init(options);
        }
    } else {
        plugin = new Plugin(this, options);
        this.data(dataKey, plugin);
    }
    return plugin;
};

}(jQuery, window, document));

Хотел бы добавить публичную функцию для сортировки JSON элемента пользователем.

$('menu select#sort').on('change', function() {
  $('#foo').loadJSON('sort');
  console.log('sortbydate');
});

Проблема в том, что если добавляю публичную функцию, AJAX уже не подгружает JSON, возвращая error: OK, если сделать отдельный JQuery код, для сортировки он сортирует только видимую часть данных, которая выведена пользователю на экран.

READ ALSO
Как подключить две библиотеки jQuery?

Как подключить две библиотеки jQuery?

Проблема в том что на версии jQuery 32

179
Вызов функции jquery происходит на странице один раз для первого индификатора, как сделать для каждого?

Вызов функции jquery происходит на странице один раз для первого индификатора, как сделать для каждого?

Есть следующая конструкция, при клике в первое поле создается маска для ввода телефона, ее создает подключенный скрипт jquerymaskedinput

210
фильтр ломает вёрстку слайдера slick.js

фильтр ломает вёрстку слайдера slick.js

Сделал слайдер на slickjs

209
Надо загрузить canvas со страницы на компьютер пользователя

Надо загрузить canvas со страницы на компьютер пользователя

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

192