datatables auto load column

最新推荐文章于 2024-05-23 15:59:55 发布

Farmwang

最新推荐文章于 2024-05-23 15:59:55 发布

阅读量196

点赞数

分类专栏： Datatables

Datatables 专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一个使用jQuery和Ajax实现的动态加载DataTable的方法。当用户选择不同的视图时，通过Ajax请求从服务器获取相应数据并更新DataTable。该过程涉及销毁旧表、设置新的列头、加载新数据等步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$('.button').click(function (event) {
        event.preventDefault();
 
        if ($('#GroupElement_Id option:selected').val() != '') {
 
            var viewname = $('#GroupElement_Id option:selected').val();
 
            //  if data-table has been initialized then destroy it
            if ($('#gem-table').hasClass('dataTable')) {
                var table = $('#gem-table').DataTable();
                //  remove all rows. important to call before destroy.
                table.clear();
                //  remove those enhancements and return the table to its original un-enhanced state
                //  call if create new tables based on new criteria with different initialisation settings
                table.destroy();
                //  empty in case the columns change
                $('#gem-table thead tr').empty();
                $('#gem-table tbody').empty();
                $('#gem-table tfoot tr').empty();
            }
 
            //  Ajax call that gets the data
            $.ajax({
                type: 'GET',
                contentType: 'application/json; charset=utf-8',
                url: apiBaseUmbraco + 'gem/gemdataserverside/',
                data:
                    {
                        'viewname': viewname,
                        'all': $('#all-gem-rows').is(':checked') ? 1 : 0
                    },
                dataType: 'JSON',
                beforeSend: function () {
                    $('.ajax-loader').show();
                },
                success: function (response) {
                    var tableColumns = jQuery.parseJSON(response).columns;
                    var columns = [];
                    var headers = '';
                    var footers = '';
 
                    //  build up table header, footer
                    //  and columns JSON array for the data-table
                    $.each(tableColumns, function (index, value) {
                        headers += '<th>' + value + '</th>';
                        footers += '<th>' + value + '</th>';
                        var headerObj = new Object();
                        headerObj['sName'] = value;
                        columns.push(headerObj);
                    });
 
                    //  insert header and footer into the table
                    $('#gem-table thead tr').html(headers);
                    $('#gem-table tfoot tr').html(footers);
 
                    $('#gem-table').dataTable({
                        'bServerSide': true,
                        'sAjaxSource': apiBaseUmbraco + 'gem/gemdataserverside/?viewname=' + viewname + '&all=' + ($('#all-gem-rows').is(':checked') ? '1' : '0'),
                        'bProcessing': true,
                        'aoColumns': columns,
                        dom: 'T<"clear">lfrtip',
                        'tableTools': {
                            'sSwfPath': '/swf/copy_csv_xls_pdf.swf'
                        },
                        'responsive': true,
                        'lengthMenu': [[25, 50, 100, -1], [25, 50, 100, 'All']],
                        'drawCallback': function (settings) {
                            $('.ajax-loader').hide();
                        },
                         
                    });
 
                    //  scroll down to data-table
                    $('html, body').animate({
                        scrollTop: $('#gem-table_wrapper').offset().top
                    }, 1000);
 
                },
                error: function (result) {
                    alert('Service call failed: ' + result.status + ' Type :' + result.statusText);
                }
            });
 
        } else {
 
        }
    });