Отобразить файл информация о партнере на JavaScript с использованием jQuery


В моем приложении отобразить деталь партнером на лицевой стороне с помощью jQuery объекты DataTable. Я написал код JavaScript с общим объявлении переменной для доступа ID и классы для селектора.

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;
    }
}

Мои готовые функции документа:

$(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();
        }
    });
});

Я написал переменную partnerList и в управление все свои селекторы. Есть ли хороший способ, чтобы написать скрипт, и какие-либо предложения для меня?



Комментарии
1 ответ

$(partnerList.controls.searchText)
$(partnerList.controls.btnSearch)

Эти два элемента выглядят, как они могли быть частью формы. Рассмотрите возможность использования форме. Таким образом, вы можете 1) подключить представить обработчик, а только написать код обработчика еще и 2) Вы можете подобрать как нажать на кнопку "Отправить" и нажмите на клавишу Enter. Вы должны будете использовать preventDefault чтобы предотвратить форме от фактически подаче и выходе.

$("div") это плохой способ что-то выбрать. Это касается всех слоев, независимо от того, если вы используете его для ваших данных таблицы или нет. Быть более конкретным, использовать класс, а не слепо выбрать все ДИВС.

$(partnerList.controls.searchText).val().trim() делается дважды. Если ситуация не изменится стоимость звонков по некоторым причинам, это лучшее, что вы кэшировать его в переменную, вместо. Тоже касается $('.datatable').

$(function () {

partnerList.initDatatable()

const dataTables = $('.datatable')

$(selectorToYourForm).on('submit', function (e) {
e.preventDefault()
const search = $(partnerList.controls.searchText).val().trim()

if (search != '') {
const name = 'srchTxt'
const value = encodeURIComponent(search)

dataTables.removeData(partnerList.variables.srchKey)
dataTables.data('srchParams', [{ name, value }])

partnerList.reload()
} else {
partnerList.reset()
}
})
})

1
ответ дан 1 февраля 2018 в 05:02 Источник Поделиться