2017-10-21 113 views
1

J'ai un datatable. Je souhaite récupérer les valeurs d'ID des lignes sélectionnées.
Comment puis-je faire cela.
Mes codes:Jquery Valeur des lignes sélectionnées

var DatatableRecordSelectionDemo = function() { 
 

 
      var demo = function() { 
 
       var url = '/Data/default.json'; 
 
       $.getJSON(url, function (data) { 
 
        var datatable = $('.m_datatable').mDatatable({ 
 
         data: { 
 
          type: "local", 
 
          source: data, 
 
          pageSize: 10, 
 
          saveState: { 
 
           cookie: true, 
 
           webstorage: true 
 
          }, 
 
          serverPaging: true, 
 
          serverFiltering: true, 
 
          serverSorting: true 
 
         }, 
 

 
         // layout definition 
 
         layout: { 
 
          theme: 'default', // datatable theme 
 
          "class": '', // custom wrapper class 
 
          scroll: false, // enable/disable datatable scroll both horizontal and vertical when needed. 
 
          height: 550, // datatable's body's fixed height 
 
          footer: false // display/hide footer 
 
         }, 
 

 
         // column sorting 
 
         sortable: true, 
 

 
         pagination: true, 
 

 
         // columns definition 
 
         columns: [{ 
 
          field: "RecordID", 
 
          title: "#", 
 
          sortable: false, // disable sort for this column 
 
          width: 40, 
 
          textAlign: 'center', 
 
          selector: { class: 'm-checkbox--solid m-checkbox--brand' } 
 
         }, { 
 
          field: "OrderID", 
 
          title: "Numara", 
 
          // sortable: 'asc', // default sort 
 
          filterable: true, // disable or enable filtering 
 
          // basic templating support for column rendering, 
 
          template: '{{OrderID}} - {{ShipCountry}}' 
 
         }, { 
 
          field: "ShipName", 
 
          title: "Adı" 
 
         }, { 
 
          field: "Status", 
 
          title: "Durumu", 
 
          // callback function support for column rendering 
 
          template: function (row) { 
 
           var status = { 
 
            true: { 'title': 'Aktif', 'class': ' m-badge--success' }, 
 
            false: { 'title': 'Pasif', 'class': ' m-badge--danger' } 
 
           }; 
 
           return '<span class="m-badge ' + status[row.Status].class + ' m-badge--wide">' + status[row.Status].title + '</span>'; 
 
          } 
 
         }, { 
 
          field: "Actions", 
 
          title: "İşlem", 
 
          width: 100, 
 
          sortable: false, 
 
          overflow: 'visible', 
 
          template: function (row) { 
 
           var tblName = String(row.ShipName).replace(/'/g, "\\'"); 
 
           var tblid = String(row.RecordID); 
 
           return '\ 
 
\t \t \t \t \t \t <a href="#" onclick="Modalac('+ tblid + ',\'' + tblName + '\',' + row.Status + ')" class="m-portlet__nav-link btn m-btn m-btn--hover-accent m-btn--icon m-btn--icon-only m-btn--pill" title="Düzenle">\ 
 
\t \t \t \t \t \t \t <i class="la la-edit"></i>\ 
 
\t \t \t \t \t \t </a>\ 
 
\t \t \t \t \t \t <a href="#" onclick="Sil('+ tblid + ',\'' + tblName + '\')" class="m-portlet__nav-link btn m-btn m-btn--hover-danger m-btn--icon m-btn--icon-only m-btn--pill" title="Sil">\ 
 
\t \t \t \t \t \t \t <i class="la la-trash"></i>\ 
 
\t \t \t \t \t \t </a>\ 
 
\t \t \t \t \t '; 
 
          } 
 
         }] 
 
        }); 
 
        var query = datatable.getDataSourceQuery(); 
 

 
        $('#m_form_search').on('keyup', function (e) { 
 
         // shortcode to datatable.getDataSourceParam('query'); 
 
         var query = datatable.getDataSourceQuery(); 
 
         query.generalSearch = $(this).val().toLowerCase(); 
 
         // shortcode to datatable.setDataSourceParam('query', query); 
 
         datatable.setDataSourceQuery(query); 
 
         datatable.load(); 
 
        }).val(query.generalSearch); 
 
        $('#m_form_status').on('change', function() { 
 
         // shortcode to datatable.getDataSourceParam('query'); 
 
         var query = datatable.getDataSourceQuery(); 
 
         query.Status = $(this).val().toLowerCase(); 
 
         // shortcode to datatable.setDataSourceParam('query', query); 
 
         datatable.setDataSourceQuery(query); 
 
         datatable.load(); 
 
        }).val(typeof query.Status !== 'undefined' ? query.Status : ''); 
 

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

 
        // on checkbox checked event 
 
        $('.m_datatable').on('m-datatable--on-check', function (e, args) { 
 
          var count = datatable.setSelectedRecords().getSelectedRecords().length; 
 
          $('#m_datatable_selected_number').html(count); 
 
          if (count > 0) { 
 
           $('#m_datatable_group_action_form').collapse('show'); 
 
          } 
 
         }) 
 
         .on('m-datatable--on-uncheck m-datatable--on-layout-updated', function (e, args) { 
 
          var count = datatable.setSelectedRecords().getSelectedRecords().length; 
 
          $('#m_datatable_selected_number').html(count); 
 
          if (count === 0) { 
 
           $('#m_datatable_group_action_form').collapse('hide'); 
 
          } 
 
         }); 
 
        $('.m_datatable tbody').on('click', 'tr', function(){ 
 
         var id = this.RecordID; 
 
         var index = $.inArray(id, selected); 
 
         if (index === -1) 
 
         { 
 
          selected.push(id); 
 
         } else 
 
         { 
 
          selected.splice(index, 1); 
 
         } 
 
         $(this).toggleClass('selected'); 
 
        }); 
 
       }); 
 
      }; 
 

 
      return { 
 
       // public functions 
 
       init: function() { 
 
        demo(); 
 
       } 
 
      }; 
 
     }(); 
 
     
 
     var TopluIslem = function() { 
 
      var datatable = $('.m_datatable').mDatatable(); 
 
      var dataArr = []; 
 
      $.each($(".m_datatable tr.selected"),function(){ 
 
       dataArr.push($(this).find('td').eq(0).text());  
 
      }); 
 
      console.log(dataArr); 
 
      alert(rowCount); 
 

 
      
 
     }; 
 
     jQuery(document).ready(function() { 
 
      DatatableRecordSelectionDemo.init(); 
 
     });
<a href="#" class="btn btn-sm btn-danger islem_yap" onclick="TopluIslem()">İşlem Yap</a>

+1

Il semble que votre poste est la plupart du temps code; s'il vous plaît ajouter un peu plus de détails https://jsfiddle.net/4famyw1a/ –

+0

Quelle bibliothèque est ** 'mDatatable' ** ...? – davidkonrad

+0

https://themeforest.net/item/metronic-responsive-admin-dashboard-template/4021469 pour acheter, je n'ai pas passé beaucoup de commentaires –

Répondre

0

Je résolu le problème

var secilenler = []; 
$('.m_datatable').on('m-datatable--on-check', function(e, args) { 
        secilenler.push(args.toString()); 
       }).on('m-datatable--on-uncheck', function (e, args) { 
        var i = secilenler.indexOf(args.toString()); 
        if(i !== -1) { 
         secilenler.splice(i, 1); 
        } 

       });