v2.5.2
Giriş yap

Datatables mobil de js click sorunu

hakankorkz
816 defa görüntülendi

Datatables mobil de js click sorunu

Merhaba arkadaşlar projem de temam da bir problemim var masaüstü görünüm de sıkıntı yok fakat mobil görünüm tarafında js komutlarım çalışmıyor tablo da veri silmek istediğim de js popap çıkması gerekiyor fakat button click bile oluşmuyor id='example1' table başından kaldırdığım da dediğim oluyor istediğim fakat mobil responsove yok oluyor aşağı da görseller ile umarım tam açıklayıcı olmuşumdur herkese iyi forumlar

Jquery kodları

Databales özelik veren kod bloğum


$(document).ready(function () {
    var pathname = window.location.pathname.substr(1);
    
    if (pathname == "personeller" ||  pathname == "index" ||  pathname == "") { // Datatables
        $("#example1").DataTable({
            "responsive": true, "lengthChange": false, "autoWidth": false
        });

    }
});

Silme işlemini gerçekleştiren js kod bloğum


$(document).ready(function () { // silme
    $('.sil').click(function () {
        var degisken = $(this);
        var silbeni = degisken.attr('data-code');
        var sil = $(this).attr("data-sil");
        var veri = 'code=' + silbeni + '&' + sil;
        // console.log(veri);
        // return false;
        Swal.fire({
            title: 'Silinecek',
            text: "Silmek İstediğinizden Emin misiniz ?",
            icon: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: 'Evet!'
        }).then((result) => {
            if (result.value) {
                $.ajax({
                    type: "POST", url: "../controller/operation-arge.php", data: veri, success: function () {
                        setTimeout(function () {
                            window.location.reload();
                        }, 2000);
                    }
                });

                Swal.fire(
                    'Deleted!',
                    'Silindi.',
                    'success'
                )
            }
        });


        return false;
    });
});


Html Yapım


<div id="example1_wrapper" class="dataTables_wrapper dt-bootstrap4"><div class="row"><div class="col-sm-12 col-md-6"></div><div class="col-sm-12 col-md-6"><div id="example1_filter" class="dataTables_filter"><label>Search:<input type="search" class="form-control form-control-sm" placeholder="" aria-controls="example1"></label></div></div></div><div class="row"><div class="col-sm-12"><table id="example1" class="table table-bordered table-striped dataTable dtr-inline" role="grid" aria-describedby="example1_info">
                            <thead>
                            <tr role="row"><th class="sorting_asc" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-sort="ascending" aria-label="#: activate to sort column descending">#</th><th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Personel/Yetkili: activate to sort column ascending">Personel/Yetkili</th><th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Firma Adı: activate to sort column ascending">Firma Adı</th><th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Marka: activate to sort column ascending">Marka</th><th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="Kayıt Tarihi: activate to sort column ascending">Kayıt Tarihi</th><th class="sorting" tabindex="0" aria-controls="example1" rowspan="1" colspan="1" aria-label="İşlemler: activate to sort column ascending">İşlemler</th></tr>
                            </thead>
                            <tbody>
                                                            
                                                                
                                                                
                                                                
                                                                
                                                            <tr role="row" class="odd">
                                    <td class="dtr-control sorting_1" tabindex="0">5</td>
                                    <td>hakankor</td>
                                    <td>2</td>
                                    <td>2</td>
                                    <td>2021-03-25 00:49:10</td>
                                    <td>
                                                                                <a href="kayit/1616622550">
                                            <button type="button" class="btn btn-success" style="width: 32%;">Detaya Git
                                            </button>
                                        </a>
                                        <a href="kayit-duzenle/1616622550">
                                            <button type="button" class="btn btn-primary" style="width: 32%;">Düzenle
                                            </button>
                                        </a>
                                        <button type="button" class="btn btn-danger sil" style="width: 30%" data-code="2" data-sil="motorkayitsil">Sil </button>
                                                                                </td>
                                </tr></tbody>
                            <tfoot>
                            <tr><th rowspan="1" colspan="1">#</th><th rowspan="1" colspan="1">Personel/Yetkili</th><th rowspan="1" colspan="1">Firma Adı</th><th rowspan="1" colspan="1">Marka</th><th rowspan="1" colspan="1">Kayıt Tarihi</th><th rowspan="1" colspan="1">İşlemler</th></tr>
                            </tfoot>
                        </table></div></div><div class="row"><div class="col-sm-12 col-md-5"><div class="dataTables_info" id="example1_info" role="status" aria-live="polite">Showing 1 to 5 of 5 entries</div></div><div class="col-sm-12 col-md-7"><div class="dataTables_paginate paging_simple_numbers" id="example1_paginate"><ul class="pagination"><li class="paginate_button page-item previous disabled" id="example1_previous"><a href="#" aria-controls="example1" data-dt-idx="0" tabindex="0" class="page-link">Previous</a></li><li class="paginate_button page-item active"><a href="#" aria-controls="example1" data-dt-idx="1" tabindex="0" class="page-link">1</a></li><li class="paginate_button page-item next disabled" id="example1_next"><a href="#" aria-controls="example1" data-dt-idx="2" tabindex="0" class="page-link">Next</a></li></ul></div></div></div></div>


Silme buttonunun classında sil var onunla button click oluyor fakat mobilde bu işlemler çalışmıyor malesef...

Sorunlu

Sorunsuz fakat responsiv değil

Cevap yaz
Cevaplar (9)
ozzwizard
482 gün önce

$(document).on("click tap vclick",#elementId,function()
{
//yapılacak işlemler
});

mobilde tıklamalar click olarak geçmediği için çalışmıyor tap, vclick gibi trigerlar da koymak gerek

ozgur551
484 gün önce

$("body").off("click", ".xxx").on("click", ".xxx", function (e) {

  alert("bunu kullan bende sorunsuz çalışır");
  });
hakankorkz
1093 gün önce

denedim farklı telefon tarayıcılardan da

makifgokce
1094 gün önce

farklı telefonlardan farklı tarayıcılardan denedin mi?
sadece sil class'ı olandamı problem var.
bide bu şekilde dene
<button data-sil="" type="button" class="btn btn-danger sil">Sil</button>

.on('click', '[data-sil]', function () { // yada .on('click', 'tbody tr button.sil', function () {
    console.log('tıklandı');
    // işlemler
});
hakankorkz
1094 gün önce

denedim böyle işlemedi

makifgokce
1094 gün önce

böyle yapmayı dene

$("#example1").DataTable({
    "responsive": true, "lengthChange": false, "autoWidth": false
}).on('click', '.sil', function () {
    console.log('tıklandı');
    // işlemler
});
hakankorkz
1094 gün önce

elbette paylaşayım..

makifgokce
1094 gün önce

kodları paylaşırsan belki daha kolay yardımcı olabilirler bu şekilde neden kaynaklanıyor tahmin etmek zor :)

hakankorkz
1094 gün önce

.