In my application display partner detail on front side using jQuery datatable. I have written JavaScript code with common declaring variable for accessing id and classes for selector.
var partnerList =
{
urls: {
srcPartnerList: '/partner/getpartnerlist',
srcViewOffer: "/partner/viewoffer/",
srcUpdateCountPartnerOffserView: "/partner/updatecountpartneroffserview",
srcDefultLogoimage: ""
},
variables: {
oTable: null,
srchKey: 'srchParams',
logoImageHeight: "150px",
logoImageWidth: "150px"
},
controls: {
tblPartnerList: $("#tblPartnerList"),
searchText: "#searchText",
btnSearch: "#btnSearch",
divPartnerContentDetail: "#partnercontentdetail"
},
initDatatable: function () {
oTable = partnerList.controls.tblPartnerList.dataTable({
"sDom": "frtip",
"ordering": false,
"processing": true,
"serverSide": true,
"sAjaxSource": partnerList.urls.srcPartnerList,
"aaSorting": [[0, "asc"]],
"bLengthChange": true,
"filter": false,
"aoColumnDefs": [
{
"aTargets": [0],
"visible": false,
},
{
"aTargets": [1],
"mRender": function (data, type, full) {
return partnerList.renderLogo(full[0], full[1]);
},
"bSortable": false
},
{
"aTargets": [2],
},
{
"aTargets": [3],
"visible": true,
"mRender": function (data, type, full) {
return partnerList.renderClickable(full[0]);
},
"bSortable": false
}],
"oLanguage": {
"sEmptyTable": "No offer(s) available",
"sLengthMenu": "Page Size: _MENU_",
"oPaginate": {
"sFirst": "<<",
"sLast": ">>",
"sNext": ">",
"sPrevious": "<"
}
},
"fnServerParams": function (aoData) {
var srchParams = $("div").data("srchParams");
if (srchParams) {
for (var i = 0; i < srchParams.length; i++) {
aoData.push({ "name": "" + srchParams[i].name + "", "value": "" + srchParams[i].value + "" });
}
}
}
});
},
reload: function () {
oTable.dataTable().fnClearTable(0);
oTable.dataTable().fnStandingRedraw();
},
reset: function () {
$("div").removeData(partnerList.variables.srchKey);
partnerList.reload();
},
renderClickable: function (partnerID, partnerName) {
var view = `<a title="View Offer" onclick="partnerList.partnerOfferCountView(${partnerID})" class="btn btn-xs btn-primary" href="${partnerList.urls.srcViewOffer}${partnerID}">View Offer</a>`;
return view;
},
renderLogo: function (partnerID, logoUrl) {
var image = "";
if (logoUrl != "") {
//"onerror="this.src=''""
image = `<a onclick="partnerList.partnerOfferCountView(${partnerID})" href="${partnerList.urls.srcViewOffer}${partnerID}"><img src='${logoUrl}' style='height:${partnerList.variables.logoImageHeight};width:${partnerList.variables.logoImageWidth
};'></a>`;
}
return image;
}
}
My document ready function:
$(document).ready(function () {
partnerList.initDatatable();
$(partnerList.controls.searchText).keypress(function (e) {
if (e.keyCode == 13) {
if ($(this).val().trim() != '') {
$("div").removeData(partnerList.variables.srchKey);
$("div").data("srchParams",
[{ name: 'srchTxt', value: encodeURIComponent($(this).val().trim()) }]
);
partnerList.reload();
}
else {
partnerList.reset();
}
}
});
$(partnerList.controls.btnSearch).click(function (e) {
if ($(partnerList.controls.searchText).val().trim() != '') {
$("div").removeData(partnerList.variables.srchKey);
$("div").data("srchParams",
[{ name: 'srchTxt', value: encodeURIComponent($(partnerList.controls.searchText).val().trim()) }]
);
partnerList.reload();
}
else {
partnerList.reset();
}
});
});
I have written a variable partnerList
and in controls add all its selectors. Is there any good way to write a script file, and any suggestions for me?