locked
DataTable RRS feed

 > 

  • Question

  • Question
    Sign in to vote
    0
    Sign in to vote
    User-797751191 posted

    Hi

      What is difference in columnDef & aoColumnDefs in Jquery Datatable

    Thanks

    Tuesday, July 2, 2019 6:57 AM

All replies

  • Question
    Sign in to vote
    0
    Sign in to vote
    User665608656 posted

    Hi jsshivalik,

      What is difference in columnDef & aoColumnDefs in Jquery Datatable

    The difference is that aoColumnDefs has a higher priority than columnDefs.

    No matter which attribute you set first, the final rendering effect of the table comes from aoColumnDefs.

    This is the definition of these two parameters :https://datatables.net/reference/option/columnDefs

    https://legacy.datatables.net/usage/columns

    In fact ,there is no substantial difference between them, their purpose is to set the column properties of the table.

    I have made an example about these two parameters:

    <!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" />
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#example').DataTable({
                aoColumnDefs: [
                    { targets: [0, 1], visible: false }
                ],
                columnDefs: [
                    { targets: [0, 1], visible: true }
                ],

            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <div style="width: 800px; height: 200px;">
            <table id="example" class="display" style="width: 100%">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Tiger Nixon</td>
                        <td>System Architect</td>
                        <td>Edinburgh</td>
                        <td>61</td>
                        <td>2011/04/25</td>
                        <td>$320,800</td>
                    </tr>
                    <tr>
                        <td>Garrett Winters</td>
                        <td>Accountant</td>
                        <td>Tokyo</td>
                        <td>63</td>
                        <td>2011/07/25</td>
                        <td>$170,750</td>
                    </tr>
                  
                </tbody>
                <tfoot>
                    <tr>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Age</th>
                        <th>Start date</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </form>
</body>
</html>

    The result of this work demo:

    Best Regards,

    YongQing.

    Tuesday, July 2, 2019 9:13 AM