JQuery не распространяется на датируемый удаленный HTML - PullRequest
Новая
       21

JQuery не распространяется на датируемый удаленный HTML

0 голосов
/ 09 мая 2019

У меня есть Datatable, который работает с удаленными данными. Проблема у меня заключается в том, что JQuery не распространяется на HTML, который приходит из удаленного. Как я могу заставить это работать? в моих скриптах уже есть функции, готовые для документов, но данные загружаются после рендеринга документа. В столбце действий я загружаю HTML и JQuery, которые у меня есть на странице, не работает с этим HTML. Вот мой код: 

var DatatableRemoteAjaxDemo = function() {
  //== Private functions

  // basic demo
  var demo = function() {

    var datatable = $('.m_datatable').mDatatable({
      // datasource definition
      data: {
        type: 'remote',
        source: {
          read: {
            url: '/admin/app/vezi_useri.php',
            map: function(raw) {
              // sample data mapping
              var dataSet = raw;
              if (typeof raw.data !== 'undefined') {
                dataSet = raw.data;
              }
              return dataSet;
            },
          },
        },
        pageSize: 10,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true,
      },

      // layout definition
      layout: {
        scroll: false,
        footer: false
      },

      // column sorting
      sortable: true,

      pagination: true,

      toolbar: {
        // toolbar items
        items: {
          // pagination
          pagination: {
            // page size select
            pageSizeSelect: [10, 20, 30, 50, 100],
          },
        },
      },

      search: {
        input: $('#generalSearch'),
      },

      // columns definition
      columns: [
        {
          field: 'card_nr',
          title: 'Card',
          sortable: false, // disable sort for this column
          width: 100,
          selector: false,
          textAlign: 'center',
        },

        {
          field: 'status',
          title: 'Status',
           width: 100,
          // callback function support for column rendering
          template: function(row) {
            var status = {
              0: {'title': 'OFF', 'class': 'm-badge--danger'},
              1: {'title': 'ACTIV', 'class': ' m-badge--success'}, 
              2: {'title': 'Service', 'class': ' m-badge--metal'},

            };
            return '<span class="m-badge ' + status[row.status].class + ' m-badge--wide" >' + status[row.status].title + '</span>';
          },
        },
        {


          field: 'actiuni',
          title: 'Actiuni',
          sortable: false, // disable sort for this column
          width: 100,
          selector: false,
          textAlign: 'center',
        },

        ],
    });


    $('#m_form_status').on('change', function() {
        alert($(this).val());
      datatable.search($(this).val(), 'status');
    });

    $('#m_form_type').on('change', function() {
      datatable.search($(this).val(), 'Type');
    });

    $('#m_form_status, #m_form_type').selectpicker();

  };

  return {
    // public functions
    init: function() {
      demo();

    },
  };
}();

jQuery(document).ready(function() {

  DatatableRemoteAjaxDemo.init();
});
...