https://www.kirby-smith.com/Scripts/FrontEnd/data.listing.js

1var KSDataListing = function () {
2    var $container = null;
3    var searchParams = {};
4    var deleteDataParams = {};
5    var deleteRowParams = {};
6    var paginateParams = {};
7    var $searchField = null;
8    var options = {
9        ajaxUpdater: '#ajax-listing',
10        allowEmptySearch: true,
11        // messages
12        confirmDeleteMsgData: 'Do you want to delete selected items?',
13        confirmDeleteMsgRow: 'Do you want to delete this item?',
14        // callbacks
15        afterLoadData: $.noop(),
16        beforeLoadData: $.noop(),
17        beforeDeleteForm: $.noop(),
18        afterDeleteForm: $.noop(),
19        beforeDeleteItem: $.noop(),
20        afterDeleteItem: $.noop(),
21        beforeSearch: $.noop(),
22        afterSearch: $.noop(),
23        beforePaging: $.noop(),
24        afterPaging: $.noop()
25    };
26    var loadingTpl = '<div class="data-loading"><img src="/images/Admin/loading-spinner-blue.gif"></div>';
27    var initDataListing = function ($selector) {
28        $container = $selector;
29        $container.css('position', 'relative');
30        if ($('input.search-field', $container).length > 0)
31            $searchField = $('input.search-field', $container).first();
32        $('[data-action="delete-form"]', $container).attr('disabled', 'disabled');
33        $('[data-action="delete-form"]', $container).on('click', function(evt){
34            evt.preventDefault();
35            evt.stopPropagation();
36            var url = $(this).attr('href');
37            var items = [];
38            $('input[name="listItems"]:checked', $container).each(function(){
39                var id = parseInt($(this).attr('data-target'));
40                if ((id != NaN) && (id > 0)){
41                    items.push(id);
42                }
43            });
44            if (items.length > 0){
45                execDeleteData(options.confirmDeleteMsgData, url, items);
46            }else{
47                $('[data-action="delete-form"]', $container).attr('disabled', 'disabled');
48                KSAdmin.notification({message: 'Please select items to delete.'});
49            }
50        });
51        initSearchForm();
52        initAjaxData();
53    };
54    var initSearchForm = function () {        
55        $('[data-action="search"], [data-action="ajax-search"]', $container).on('click', function (e) {
56            e.preventDefault();
57            
58            var actionType = $(this).attr('data-action');
59            if (!options.allowEmptySearch) {
60                var searchText = $.trim($searchField.val());
61                $searchField.val(searchText);
62                if (searchText.length == 0) {
63                    KSAdmin.notification({ message: 'Search text is required.' });
64                    return;
65                }
66            }
67            searchParams['page'] = 1;
68            if ($searchField)
69                searchParams['q'] = $.trim($searchField.val());
70            if (!__beforeSearch(searchParams)) {
71                return;
72            }
73            if (actionType == 'ajax-search') {
74                showLoading();
75                var searchURL = $(this).attr('data-url');
76                $.post(searchURL, searchParams, function (htmlData) {
77                    hideLoading();
78                    $(options.ajaxUpdater).html(htmlData);
79                    __afterSearch(htmlData);
80                    setTimeout(function(){
81                        initAjaxData();
82                    }, 500);
83                });
84            } else {
85
86            }
87        });
88    };
89    var initAjaxData = function () {
90        $('#check-all', $container).on('change', function () {
91            var val = $(this).is(':checked');
92            $('input[name="listItems"]', $container).prop('checked', val);
93            $.uniform.update();
94            if (val) {
95                $('[data-action="delete-form"]').removeAttr('disabled', 'disabled');
96            } else {
97                $('[data-action="delete-form"]').attr('disabled', 'disabled');
98            }
99        });
100        $('input[name="listItems"]', $container).on('change', function () {
101            var numberOfItems = $('input[name="listItems"]', $container).length;
102            var numberSelectedItems = $('input[name="listItems"]:checked', $container).length;
103            if (numberSelectedItems == numberOfItems) {
104                $('#check-all').prop('checked', true);
105            } else {
106                $('#check-all').prop('checked', false);
107            }

108            $.uniform.update();
109            if (numberSelectedItems > 0) {
110                $('[data-action="delete-form"]').removeAttr('disabled', 'disabled');
111            } else {
112                $('[data-action="delete-form"]').attr('disabled', 'disabled');
113            }
114        });
115        initUniform();
116        $('.act-remove-item', $container).on('click', function (evt) {
117            evt.preventDefault();
118            evt.stopPropagation();
119            var url = $.trim($(this).attr('href'));
120            if ((typeof url == 'undefined') || (url == 'javascript:;') || (url == '#')) {
121                url = $('[data-action="delete-form"]').first().attr('href');
122            }
123            var id = parseInt($(this).attr('data-target'));
124            var items = [];
125            if ((id != NaN) && (id > 0)){
126                items.push(id);
127            }
128            if (items.length > 0){
129                execDeleteData(options.confirmDeleteMsgRow, url, items);
130            }else{
131                KSAdmin.notification({message: 'Please select a item to delete.'});
132            }
133        });
134        initPaging();
135    };
136    var initPaging = function(){
137        var $pagingContainer = $('#pagingContainer');
138        if ($pagingContainer.length > 0){
139            var pagingURL = $pagingContainer.attr('data-url');
140            $('li', $pagingContainer).each(function(){
141                var $li = $(this);
142                if ($li.hasClass('disabled') || $li.hasClass('active')){
143                    return;
144                }
145                $li.find('> a').on('click', function(){
146                    var page = parseInt($(this).attr('data-target').replace('page-', '')) || 1;
147                    var params = $.extend(true, searchParams, { page: page });
148                    if (!__beforePaging(params)) {
149                        return;
150                    }
151                    showLoading();
152                    $.post(pagingURL, params, function(htmlData){
153                        hideLoading();
154                        $(options.ajaxUpdater).html(htmlData);
155                        __afterPaging(htmlData);                           
156                        setTimeout(function(){
157                            initAjaxData();
158                        }, 500);
159                    });
160                });
161            });
162        }
163    };
164    var showLoading = function () {
165        $container.append(loadingTpl);
166    };
167    var hideLoading = function () {
168        $('> div.data-loading', $container).remove();
169    };
170    var initUniform = function () {
171        var test = $("input[type=checkbox]:not(.toggle, .md-check, .md-radiobtn, .make-switch, .icheck), input[type=radio]:not(.toggle, .md-check, .md-radiobtn, .star, .make-switch, .icheck)", $container);
172        if (test.size() > 0) {
173            test.each(function () {
174                if ($(this).parents(".checker").size() === 0) {
175                    $(this).show();
176                    //$(this).uniform();
177                }
178            });
179        }
180    };
181    var execDeleteData = function(confirmMsg, url, items){
182        bootbox.confirm(confirmMsg, function (result) {
183            if (result) {
184                if (confirmMsg == options.confirmDeleteMsgData){
185                    if (!__beforeDeleteForm(items)){
186                        return;
187                    }
188                }else{
189                    if (!__beforeDeleteItem(items[0])){
190                        return;
191                    }
192                }
193                showLoading();
194                $.ajax({

195                    type: 'POST',
196                    url: url,
197                    data: {items: items},
198                    traditional: true,
199                    success: function(htmlData){
200                        hideLoading();
201                        if (confirmMsg == options.confirmDeleteMsgData){
202                            __afterDeleteForm();
203                        }else{
204                            __afterDeleteItem();
205                        }
206                        $(options.ajaxUpdater).html(htmlData);
207                        setTimeout(function(){
208                            initAjaxData();
209                        }, 500);
210                        $('[data-action="delete-form"]', $container).attr('disabled', 'disabled');
211                    }
212                });
213            }
214        });
215    };
216    var __afterLoadData = function (params) {
217        if ($.isFunction(options.afterLoadData)) {
218            if (options.afterLoadData(params) == false) {
219                return false;
220            }
221        }
222        return true;
223    };
224    var __beforeSearch = function (params) {
225        if ($.isFunction(options.beforeSearch)) {
226            if (options.beforeSearch(params) == false){
227                return false;
228            }
229        }
230        return true;
231    };
232    var __afterSearch = function (htmlData) {
233        if ($.isFunction(options.afterSearch)) {
234            options.afterSearch(htmlData);
235        }
236    };
237    var __beforeDeleteForm = function(items){
238        if ($.isFunction(options.beforeDeleteForm)) {
239            if (options.beforeDeleteForm(items) == false)
240                return false;
241        }
242        return true;
243    }
244    var __afterDeleteForm = function(){
245        if ($.isFunction(options.afterDeleteForm)) {
246            options.afterDeleteForm();
247        }
248    }
249    var __beforeDeleteItem = function(id){
250        if ($.isFunction(options.beforeDeleteItem)) {
251            if (options.beforeDeleteItem(id) == false)
252                return false;
253        }
254        return true;
255    }
256    var __afterDeleteItem = function(){
257        if ($.isFunction(options.afterDeleteItem)) {
258            options.afterDeleteItem();
259        }
260    }
261    var __beforePaging = function(params){
262        if ($.isFunction(options.beforePaging)) {
263            if (options.beforePaging(params) == false)
264                return false;
265        }
266        return true;
267    }
268    var __afterPaging = function(htmlData){
269        if ($.isFunction(options.afterPaging)) {
270            if (options.afterPaging(htmlData) == false)
271                return false;
272        }
273        return true;
274    }
275    return {
276        init: function ($selector, opts) {
277            options = $.extend(true, options, opts);
278            initDataListing($selector);
279            __afterLoadData(searchParams);
280        },
281        search: function (url, params) {
282            showLoading();
283            $.post(url, params, function (htmlData) {
284                hideLoading();
285                $(options.ajaxUpdater).html(htmlData);
286                __afterSearch(htmlData);
287                setTimeout(function () {
288                    initAjaxData();
289                }, 500);
290            });
291        }
292    };
293}();