How Serial Number not changing after search filter

ashiquem01

    $(document).ready(function () {
        var value = 0;

    $.ajax({
        url: "/Finance/GetAllCashbook",
        contentType: "application/json",
        dataType: 'json',
        type: "POST",
        contentType : "application/json",
        //data: JSON.stringify(filter),
        success: function(result){
            var table = $('#Ashique').DataTable({
                filter: true,
                "processing": true,
                "order": [[4, 'desc']],
               
                data: result.data.list,


                columns: [

                {
                    title: "Sl No.",
                    data: null,
                    render : function (data, type, full, meta) {
                        return meta.row + 1;
                    }
                },
                {
                    title: "Date and Time",
                    render: function (datum, type, row) {
                        return ""+row.date_+" "+row.time_+"";
                    },
                },
                {
                    data: "description",
                    title :"Description"
                },
                {
                    data: "category_name",
                    title: "Category"
                },
                {
                    title: "Amount",
                    render: function (datum, type, row) {
                        if (row.cash_in_out == 1) {
                          
                            return " " + row.cash_in + ""
                        }
                        else
                        {
                            return " " + row.cash_out + ""
                        }
                    },
                },
                {
                    title: "Balance",
                    orderable: true, 
                    render: function (datum, type, row) {
                        value = value + row.cash_in;
                        value = Math.round(value);
                            return " " + value + ""
                    },
                },
                ]
            });
            

        }

         

    });
        
    });
 

The result is attached below

its working fine up to here.

When I search "MUHAMMED SAHEED K.P (R NO. ZQ001578 - PREVIOUS YEAR FEE"
the result showing Serial No.2 as shown below

I need here Serial No.1
How Can I achieve

kthorngren

The meta.row parameter is the row().index() which doesn't change during sorting or searching. I think you are looking for this index example which updates anytime the table is sorted or searched.

Kevin

ashiquem01

Hi @kthorngren
Thanks , Now serial No. is working fine,

But how can I assign column title

columns: [
{

                title: "Sl No.",

            },
            {
                title: "Date and Time",
                render: function (datum, type, row) {
                    return "<div>"+row.date_+"</div> <div>"+row.time_+"</div>";
                },
            },
            {
                data: "description",
                title :"Description"
            },

]

but on page load getting error

and One more Doubt

My balance Column
How can I recalculate my balance column after Search
its Previous Balance (+ or -) Credit or Debit

colin

Have you followed the steps in the technical notes linked to in the error? That'll be the place to start. If so, what did you find?

Colin

kthorngren

Try adding data: null to that column. See the columns.data docs for details.

How can I recalculate my balance column after Search

Use the same code in the example I linked to. Change it to keep the running total for the column you are interested in, something like this to total column 6:

        let total = 0;
 
        t.cells(null, 6, { search: 'applied', order: 'applied' }).every(function (cell) {
            total += t.row( this.index().row ).data().cash_in * 1;
            this.data( total );
        });

This uses the row property of the cell().index() to get the row the cell is on then uses row().data() to get the row's data. It multiplies by 1 to convert the string data to a number. cell().data() is used to update the cell with the running total.

Kevin

ashiquem01

Thank you @kthorngren, Balance is also working smoothly

The error that I mentioned above comment is solved by using

data: "",
defaultContent: "",

 columns: [

                {
                   
                    title: "Sl No.",
                    data: "",
                    defaultContent: "",
                    
                },
]

Thank you once again for your instant support.

One more doubt about balance calculation...
Can I show the balance in reverse order?

I mean Serial No. 2 balance should be 2000 and Serial No. 2 balance should be 3000

Check the below screenshot

colin

Because you've calculated the order in the columns.render function, that means the value is calculated only once when the table is first initialised, so it'll be the same regardless of the table's ordering or filtering.

If you want it to change based on the order, it would be better to move that code either into draw (or order as shown in this example), or perhaps drawCallback,

Colin

kthorngren

Can I show the balance in reverse order?

There is nothing built into Datatables for cells().every() to traverse the cells in reverse order. One option might be to change the above loop to push the running totals onto an array. Then create a new cells().every() loop for the Balance column. In that loop get the last element in the array to store in the cell using cell().data().

Kevin

kthorngren

I was wrong. Datatables does have a reverse() API. Try this:

let total = 0;
 
t.cells(null, 6, { search: 'applied', order: 'applied' }).reverse().every(function (cell) {
    total += t.row( this.index().row ).data().cash_in * 1;
    this.data( total );
});

I didn't try it so not sure if it will work.

Kevin

ashiquem01

@kthorngren reverse() is not working
Do you have any idea to reverse?

kthorngren

I tried it and reverse() doesn't seem to do anything with the cells().every() function. Maybe my first suggestion will work for you.

Kevin