Convert Gridview to Jquery Datatable

Question

Hi

  How to Convert Gridview to Jquery Datatable. I am getting below error

Uncaught TypeError: Cannot read properties of undefined (reading 'mData')
    at HTMLTableCellElement.<anonymous> (datatables.min.js:102:259)
    at Function.each (jquery.min.js:2:2573)
    at w.fn.init.each (jquery.min.js:2:1240)
    at HTMLTableElement.<anonymous> (datatables.min.js:102:214)
    at Function.each (jquery.min.js:2:2573)
    at w.fn.init.each (jquery.min.js:2:1240)
    at w.fn.init.n [as dataTable] (datatables.min.js:95:199)
    at h.fn.DataTable (datatables.min.js:177:488)
    at HTMLDocument.<anonymous> (AddRecommendedBooks:575:40)
    at l (jquery.min.js:2:29375)

                                        <asp:GridView ID="grdPlanning" class="table table-bordered" runat="server" onsorting="grdPlanning_Sorting" AllowSorting="True" OnRowDataBound="gr_RowDataBound" OnRowCommand="grdPlanning_RowCommand" AutoGenerateColumns="true">
                                        </asp:GridView>


<script type="text/javascript">
            $(function () {
                $("[id*=grdPlanning]").DataTable(
                    {
                        bLengthChange: true,
                        lengthMenu: [[5, 10, -1], [5, 10, "All"]],
                        bFilter: true,
                        bSort: true,
                        bPaginate: true
                    });
            });
        </script>

grdPlanning.UseAccessibleHeader = true;
                    grdPlanning.HeaderRow.TableSection = TableRowSection.TableHeader;

Thanks