How can I get my +- buttons working on all pages?

jgstephenson

I have a basic table, but with +- buttons:

            <tbody>
                @foreach (var item in Model.Stock)
                {
                    <tr>
                        @Html.HiddenFor(modelItem => item.Id)
                        @Html.HiddenFor(modelItem => item.StockCode)
                        @Html.HiddenFor(modelItem => item.AnotherChecked)
                        <td>
                            @Html.DisplayFor(modelItem => item.Description)
                        </td>
                        <td>
                            <button type="button" class="buttonM">&dArr;</button>
                            @Html.TextBoxFor(modelItem => item.NewQty, new { id = "newQty", name = "newQtyN", type = "number", min = "0", max = "1000", style = "width:50px" })
                            <button type="button" class="buttonP">&uArr;</button>
                        </td>

                        <td>
                            @Html.CheckBoxFor(modelItem => item.Checked, new { id = "checked" })

                        </td>
                    </tr>
                }
            </tbody>

the code that USED (before dataTables) to work fine for +- is

            $(".buttonM").on("click", function () {

                var myT = document.getElementById('stockTable');
                var $row = $(this).parents('tr:first');
                var newVal=Number( $row.find('#newQty').val())-1;
                if (newVal>=0)
                    var sel = $row.find('#newQty').val(newVal);

            });
            $(".buttonP").on("click", function () {
                var myT = document.getElementById('stockTable');
                var $row = $(this).parents('tr:first');
                var newVal = Number( $row.find('#newQty').val())+1 ;
                if (newVal >= 0)
                    var sel = $row.find('#newQty').val(newVal);
            });

now it only works on the first page - can anyone point me to the solution?

allan

This is answered in the FAQs, specifically:

Q. My events don't work on the second page

Allan

jgstephenson

I have tried using the suggested code, but my second column has buttons in it

            <td>
                <button type="button" class="buttonM">&dArr;</button>
                @Html.TextBoxFor(modelItem => item.NewQty, new { id = "newQty", name = "newQtyN", type = "number", min = "0", max = "1000", style = "width:50px" })
                <button type="button" class="buttonP">&uArr;</button>
            </td>

which are not separated - I suppose they could be put into columns but it wouldn't format it correctly. Is there a way to tell the DataTable to ignore the pushbuttons?

allan

I'm afraid I don't fully understand the issue. Can you link to the page showing the issue please.

Allan

jgstephenson

Hi
The problem is I can't get the code working which increments or decrements the NewQty. The code is:

            <tbody>
                @foreach (var item in Model.Stock)
                {
                    <tr>
                        @Html.HiddenFor(modelItem => item.Id)
                        <td>
                            @Html.DisplayFor(modelItem => item.Description)
                        </td>
                        <td>
                            @Html.TextBoxFor(modelItem => item.NewQty)
                        </td>
                        <td>
                            <button type="button" class="buttonM">&dArr;</button>
                            <button type="button" class="buttonP">&uArr;</button>
                        </td>

                        <td>
                            @Html.CheckBoxFor(modelItem => item.Checked, new { id = "checked" })

                        </td>
                    </tr>
                }
            </tbody>

As you see I have moved the Up and Down buttons to their own column, I need a script for the button to do something like:

        var table = $('#stockTable').DataTable();
        $(".buttonM").on("click", function () {

            var c = table.cell(NUMBER 1 CELL); // ???

            c.data(c.data() - 1).draw();
  
        });

any help, much appreciated.

allan

That isn't a delegated event listener. If you have a read through the FAQ I linked to and the example it in turn links to it notes that you should use a delegated event listener and gives an example.

Then you can simply use table.cell( $(this).closest('td') ); to get the DataTable cell object.

Allan

jgstephenson

I pasted the wrong bit of code before:

         var table = $('#stockTable').DataTable();
        
        $('#stockTable tbody').on('click', 'tr', function () {
            
            //var data = table.row(this).data();
            var c = table.cell(this).closest('td');
            alert(c);
            //c.data(c.data() + 1).draw();
            
        });

I have read the FAQs and the manual. Is this a 'delegated event listener '?

allan

Yes it is. If it isn't working we would need a link to a test page showing the issue.

Allan