We need to create the blog.js
file in the Admin
folder and to define the following variables:
jsonPage
(the module name; in our case is Blog)aoColumns
(the posts table column names)We also need to setup the function loadData(aoData)
that returns the filters values for our entity:
length
(set by the datatables iDisplayLength
var)start
(set by the datatables iDisplayStart
var)secho
(set by the datatables sEcho
var)filters
(set by us using the inputs from the data table header row)
-1
(we use -1
value as any value, like the simple input with no value)
if($(element).data('ui-autocomplete') && $(element).data('ui-autocomplete').hasOwnProperty('selectedItem') && $(element).data('ui-autocomplete').selectedItem) filters.filters[FILTERNAME] = $(element).data('ui-autocomplete').selectedItem.id;
Replace $(element) with the jquery element selector and FILTERNAME with the column name
Because our entity has a html content editor (we use CKEditor for this type of editor) and a combobox for admins (the authors of posts) we need to instantiate them when the document is loaded.
The content of blog.js
file
var jsonPage = 'Blog',
aoColumns = [
{ "mData": "id" },
{ "mData": "title" },
{ "mData": function(e) {
//Return column "name" from table "admins"; this is loaded automatically because we added a foreign key to "admin" column in "posts" table
return e.admins.name;
} },
{ "mData": "date_updated" },
{ "mData": function (e) {
return $('#statusf').find('option[value="' + e.status + '"]').text();
} },
{ "mData": function(e) {
return "<span class=\"actions btn fa fa-edit\"></span><span class=\"actions btn btn-outline-danger fas fa-trash\" title=\"" + jsstrings.delete + "\" data-actid=\"" + e.id + "\" data-toggle=\"modal\" data-target=\"#confirm_delete\"></span>";
} }
],
delAction = 'delete_post';
$(function() {
//Replace the simple textarea with a CKEditor
CKEDITOR.replace('edcontent', {
allowedContent: true,
extraPlugins: 'justify'
});
//Set the inputs with the "autocomplete-author" css class as comboboxes and load their values from Administrators module
$(".autocomplete-author").combobox({
source: function(request, response) {
var data = {};
data.filters = {};
data.filters.name = request.term;
$.ajax({
type: 'POST',
url: 'json/Administrators',
data: data,
jsonp: "callback",
dataType: "jsonp",
success: function(data) {
response($.map(data, function(el, index) {
var iddata = index.substring(1);
return {
value: el,
id: iddata
};
}));
}
});
},
minLength: 3
});
});
//Function to set filters when loading data for the table of posts
function loadData(aoData) {
var filters = {};
$(aoData).each(function(i, val) {
if(val.name == 'sEcho') filters.secho = val.value;
else if(val.name == 'iDisplayStart') filters.start = val.value;
else if(val.name == 'iDisplayLength') filters.length = val.value;
});
filters.filters = {};
if($("#idf").val()!='') filters.filters['id'] = $("#idf").val();
if($("#titlef").val()!='') filters.filters['title'] = $("#titlef").val();
if($("#authorf").data('ui-autocomplete') && $("#authorf").data('ui-autocomplete').hasOwnProperty('selectedItem') && $("#authorf").data('ui-autocomplete').selectedItem) filters.filters['admin'] = $("#authorf").data('ui-autocomplete').selectedItem.id;
if($("#statusf").val()!='-1') filters.filters['status'] = $("#statusf").val();
return filters;
}