render with Ajax

I have a table with a list of queries. One of the fields is the sql statement of the particular query. I would like to have a column of the data table return the count of records that query returns.

                {
                    data: null, title: "# of Records", defaultContent: '<getting record count>',
                    
                    render: function (data, type, row) {
                        if (type === 'display') {
                            var recCount=0;
                            console.log("data1", data.Statement)
                            if (data.Statement != null && data.Statement !='') {
                                console.log("getting count")
                                $.ajax({
                                    url: "api/DynamicReturn?readText=" + data.Statement,
                                    //async: false,
                                    success: function (data) {
                                        console.log("data2", data.data.length);
                                        recCount = data.data.length;
                                    }
                                })
                                return recCount;
                            } else {
                                return 'Not Developed yet';
                            }
                        }
                    }, 
                    className: "text-center"

                },

This works fine if I use async: false. However, it takes forever to load initially. What would be awesome is that when the ajax is done, it goes back and updates the cell (I can put a 'calculating...' placeholder or something while it is loading.

Is this possible?

and a side question.... this render is being called twice per row, why is that? Is there more than one 'type ===display'