jquery each loop on element not working on mobile

nima20

Hi
i want to add element to before and after my input elements in the DataTables in desktop(Not Responsive) All Things Work.
but in The Responsive Mode My Code Not Working.
in responsive not working.
when paging not working other page 2.3.4.5....
only on page number 1 and on my jquery work and desktop Mode.

jQuery(document).ready(function () {
    if (jQuery('#example').length) {
        jQuery('#example').DataTable({
            responsive: true,
            serverSide: true,
            paging: true,
            searching: true,
            language: {
                url: siteAddress + '/wp-content/...',
            },
            ajax: {
                url: 'http://localhost/....',
                dataSrc: "0",

            },

            "initComplete": ttt,

            columns: [
                { data: 'product_img' },
                { data: 'product_name' },
                { data: 'product_price' },
                { data: 'product_actions' },
            ]
        }).columns.adjust().responsive.recalc();
    }

});


function ttt() {
    let eeee = jQuery('.table .quantity input.input-text');

    eeee.every(function () {
        jQuery(this).before('<span class="dtb-minus-qty"><i class="fas fa-minus"></i></span>');
        jQuery(this).after('<span class="dtb-plus-qty"><i class="fas fa-plus"></i></span>');
        jQuery(this).parents('.quantity').addClass('datatable-custom-qty');
        jQuery(this).show();
    });
    });
}



    <table id="example" class="display table-responsive table" style="width:100%">
        <thead>
            <tr>
                <th>image</th>
                <th>product name</th>
                <th>product price</th>
                <th>actions</th>
            </tr>
        </thead>

<tbody>
            <tr>
                <td>image url src</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td><div class="quantity">
                <label class="screen-reader-text" for="quantity_62fc8d4d64439"></label>
        <input type="number" id="quantity_62fc8d4d64439" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1" title="تعداد" size="4" placeholder="" inputmode="numeric">
            </div></td>
            </tr>
            <tr>
                <td>image url src</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td><div class="quantity">
                <label class="screen-reader-text" for="quantity_62fc8d4d64439"></label>
        <input type="number" id="quantity_62fc8d4d64439" class="input-text qty text" step="1" min="1" max="" name="quantity" value="1"  size="4" placeholder="" inputmode="numeric">
            </div></td>
            </tr>
    </table>

allan

Thanks for your question. As noted in the forum rules, please post a link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Allan

nima20

i upload my codes. i want to add two button after and before my input in the table but my jquery code not working.

this is my code :
https://jsfiddle.net/otwx2avg/

kthorngren

One problem is your ttt() function doesn't seem to work even when Datatables is not used. I removed Datatables and just called the function in this test case. There are no buttons.
https://jsfiddle.net/09368w7y/

Even if the ttt() function worked it would only be applied to the rows shown on the first page. All other pages are removed from the DOM and the ttt() function wouldn't find them.

One option is to use columns.render to render the HTML to show the buttons and input. This example just shows two buttons but it can be changed to include the input.
http://live.datatables.net/qemodapi/1/edit

Kevin

nima20

this link you send not work 404
http://live.datatables.net/qemodapi/1/edit

kthorngren

The link does work. It seems accessing live.datatables.net is problematic for some people. Try clearing your browser's cache or a different browser. Here is the code in case you can't get to the example:

  var table = $('#example').DataTable({
    columnDefs: [
      {  targets: 1,
         render: function (data, type, row, meta) {
            return '<input type="button" class="name" id=n-"' + meta.row + '" value="Name"/><input type="button" class="salary" id=s-"' + meta.row + '" value="Salary"/>';
         }

      }
    ]
  });
  
$('#example tbody').on('click', '.name', function () {
  var id = $(this).attr("id").match(/\d+/)[0];
  var data = $('#example').DataTable().row( id ).data();
  console.log(data[0]);
});
  
  
$('#example tbody').on('click', '.salary', function () {
  var id = $(this).attr("id").match(/\d+/)[0];
  var data = $('#example').DataTable().row( id ).data();
  console.log(data[5]);
});

Kevin

nima20

live.datatables.net not work for me on every device. plz upload code to other service.
This code is not what I want. I have an input number that is loaded inside a table via a wordpress loop. And I want two buttons that increase and decrease the value of this input number. Thanks for the help

allan

Your browser might be making it an https:// link - try modifying it to be http:// . I thought I'd fixed that, but apparently not...

Also, I should point out that Kevin is freely giving his time to offer help. Demanding that he write code for you is not good etiquette. He has shown code which could be modified to suit your needs.

Allan

kthorngren

Checkout this example. You can wrap your buttons around the data parameter which should be the text input.

Kevin

nima20

thanks,
i Find problem when browser go to responsive mode(chrome) button and jquery not working you can see this problem on the your previous code send to me from this link

https://jsfiddle.net/nima20/kx5pb1nf/1/

after back to desktop exit from responsive mobile all things good work and no problem

kthorngren

Your test case isn't loading the responsive library and you are using table-response to configure it but that's not the right class to use. See the responsive installation docs.

I updated the test case to include responsive and use the class responsive on the table tag. The buttons now work in responsive mode.
https://jsfiddle.net/82pf3uvj/

Kevin