Передача данных о строках в пользовательские кнопки на конвейере datatable

Question

все, что я пытаюсь сделать до сих пор, - это отображать данные строки с помощью window.alert по щелчку пользовательской кнопки в каждой строке таблицы. Но пока я тоже не смог. вот мой код:

$.fn.dataTable.pipeline = function (opts) { 
     // Configuration options 
     var conf = $.extend({ 
      pages: 5,  // number of pages to cache 
      url: '',  // script url 
      data: null, // function or object with parameters to send to the server 
          // matching how `ajax.data` works in DataTables 
      method: 'GET' // Ajax HTTP method 
     }, opts); 

     // Private variables for storing the cache 
     var cacheLower = -1; 
     var cacheUpper = null; 
     var cacheLastRequest = null; 
     var cacheLastJson = null; 

     return function (request, drawCallback, settings) { 
      var ajax   = false; 
      var requestStart = request.start; 
      var drawStart  = request.start; 
      var requestLength = request.length; 
      var requestEnd = requestStart + requestLength; 

      if (settings.clearCache) { 
       // API requested that the cache be cleared 
       ajax = true; 
       settings.clearCache = false; 
      } 
      else if (cacheLower < 0 || requestStart < cacheLower || requestEnd > cacheUpper) { 
       // outside cached data - need to make a request 
       ajax = true; 
      } 
      else if (JSON.stringify(request.order) !== JSON.stringify(cacheLastRequest.order) || 
         JSON.stringify(request.columns) !== JSON.stringify(cacheLastRequest.columns) || 
         JSON.stringify(request.search) !== JSON.stringify(cacheLastRequest.search) 
      ) { 
       // properties changed (ordering, columns, searching) 
       ajax = true; 
      } 

      // Store the request for checking next time around 
      cacheLastRequest = $.extend(true, {}, request); 

      if (ajax) { 
       // Need data from the server 
       if (requestStart < cacheLower) { 
        requestStart = requestStart - (requestLength*(conf.pages-1)); 

        if (requestStart < 0) { 
         requestStart = 0; 
        } 
       } 

       cacheLower = requestStart; 
       cacheUpper = requestStart + (requestLength * conf.pages); 

       request.start = requestStart; 
       request.length = requestLength*conf.pages; 

       // Provide the same `data` options as DataTables. 
       if ($.isFunction (conf.data)) { 
        // As a function it is executed with the data object as an arg 
        // for manipulation. If an object is returned, it is used as the 
        // data object to submit 
        var d = conf.data(request); 
        if (d) { 
         $.extend(request, d); 
        } 
       } 
       else if ($.isPlainObject(conf.data)) { 
        // As an object, the data given extends the default 
        $.extend(request, conf.data); 
       } 

       settings.jqXHR = $.ajax({ 
        "type":  conf.method, 
        "url":  conf.url, 
        "data":  request, 
        "dataType": "json", 
        "cache": false, 
        "success": function (json) { 
         cacheLastJson = $.extend(true, {}, json); 

         if (cacheLower != drawStart) { 
          json.data.splice(0, drawStart-cacheLower); 
         } 
         if (requestLength >= -1) { 
          json.data.splice(requestLength, json.data.length); 
         } 

         drawCallback(json); 
        } 
       }); 
      } 
      else { 
       json = $.extend(true, {}, cacheLastJson); 
       json.draw = request.draw; // Update the echo for each response 
       json.data.splice(0, requestStart-cacheLower); 
       json.data.splice(requestLength, json.data.length); 

       drawCallback(json); 
      } 
     }; 
    }; 

    // Register an API method that will empty the pipelined data, forcing an Ajax 
    // fetch on the next draw (i.e. `table.clearPipeline().draw()`) 
    $.fn.dataTable.Api.register('clearPipeline()', function() { 
     return this.iterator('table', function (settings) { 
      settings.clearCache = true; 
     }); 
    }); 


    // 
    // DataTables initialisation 
    // 
    $(document).ready(function() { 
    $('#first_cycle').DataTable({ 
    "processing": true, 
    "serverSide": true, 
    "ajax": $.fn.dataTable.pipeline({ 
    url: 'scripts/server_processing.php', 
    pages: 5 // number of pages to cache 
    }), 

    "columnDefs": [ { 
    "targets": -1, 
    "data": null, 
    "defaultContent": " 
<div class='w3-btn-group w3-vertical w3-row-padding'> 
<a id='payment' >click1</a> 
<button id='paymentDetails' >click2</button></div>" 
    }] 
    }); 

    $('#first_cycle tbody').on('click', '#paymentDetails', function() { 
    var data = table.row($(this).parents('tr')).data(); 
    window.alert(data[1]); 
    }); 


    }); 

Это выбирает таблицу довольно хорошо, но часть я не могу показаться, чтобы получить право эта часть

$('#first_cycle tbody').on('click', '#paymentDetails', function() { 
    var data = table.row($(this).parents('tr')).data(); 
    window.alert(data[1]); 
    }); 

и я сделал так, чтобы включить все это

https://code.jquery.com/jquery-1.12.4.js

https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js

, но он все еще не работает, я буду очень рад, если кто-нибудь сможет мне помочь.

Answer 1

Судя по вашему комментарию, кажется, что вы забыли назначить переменную table экземпляру Datatable.

попробовать объявляющий таблицу как глобального (var table в начале сценария, так что вы можете получить доступ к нему везде) и назначить экземпляр этого объекта DataTable к нему:

table = $("#first_cycle").DataTable({...});