如何重新数据化datatable jquery [英] How to reintialize datatable jquery

问题描述

分页和排序工作正常我们选择下拉，如果我选择其他一些下拉意味着显示旧记录和分页也无法正常工作。我希望每次更改下拉时更改带分页的表。 br />


警告框显示无法重新初始化数据表。



请帮我解决我的问题。



我尝试过：

paging and sorting working fine at first time we select the drop down,if i choose some other drop down means displaying old records and paging also not working.I want to change the table with paging each time change the Drop down.

alert box showing cannot reinitialize data table.

please help me to resolve my issue .

What I have tried:

<script type="text/javascript">
        function funChangeTable(ddlObj) {
            var name = ddlObj.value;
            debugger; 
            $.ajax({
                url: 'JsonPaging.aspx/GetTableData',
                data: JSON.stringify({ tableName: name }),
                type: 'post',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(response) {
                    debugger;
                    var json = JSON.parse(response.d);
                    generateTable(json);
                  
                },
                error: function(a, b, c) {
                    console.log(a, b, c);
                }
            });
        }
  
//        function funChange(ddlObj1) {
//            var name1 = ddlObj1.value;
//            debugger;
//            $.ajax({
//            url: 'JsonPaging.aspx/Paging',
//                data: JSON.stringify({ tableName: name1 }),
//                type: 'post',
//                contentType: "application/json; charset=utf-8",
//                dataType: "json",
//                success: function(response) {
//                    debugger;
//                    var json = JSON.parse(response.d);
//                    paging(json);
//                },
//                error: function(a, b, c) {
//                    console.log(a, b, c);
//                }
//            });
//        }

//        function paging(json) {
//            var $table = $('#tblDynamic');
//            $table.find('thead').empty()
//            $table.find('tbody').empty()
//        }
//            if (json && json.length > 0) {
//                var header = json[0];
//                var columns = [];
//                for (var col in header) {
//                    columns.push('<th>' + col + '</th>');
//                }
          function generateTable(json) {
            
            var $table = $('#tblDynamic');
            $table.find('thead').empty()
            $table.find('tbody').empty()
            if (json && json.length > 0) {
                var header = json[0];
                var columns = [];
                for (var col in header) {
                    columns.push('<th>' + col + '</th>');
                }
                $table.find('thead').append('<tr>' + columns.join('') + '</tr>');
               
                var rows = [];
                for (var i = 0; i < json.length; i++) {
                  
                    var row = json[i];
                    var tds = [];
                    for (var col in row) {
                        tds.push('<td>' + row[col] + '</td>');
               
                       // tds.push('<td>' + row.city_name + '</td>');
                       // tds.push('<td>' + row.population + '</td>');
                       //tds.push('<td>' + row.year + '</td>');
                    } 
                    rows.push('<tr>' + tds.join() + '</tr>');
                } 
                $table.find('tbody').append(rows.join(''));
            }
            
            new1();
            





        }
        

        function new1() {
//   $('#tblDynamic').dataTable();
            
             $('#tblDynamic').DataTable({
          

            
                 initComplete: function() {
                     this.api().columns().every(function() {
                     debugger;
                         
                         var column = this;
                         var select = $('<select><option value=""></option></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function() {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
                        //to select and search from grid  
                        debugger;
                        column
                            .search(val ? '^' + val + '$' : '', true, false)
                            .draw();
                        
                    });

                         column.data().unique().sort().each(function(d, j) {
                         select.append('<option value="' + d + '">' + d + '</option>')

                     });
                     
                     });
                 }

             });
            
             
         }

       
        
        </script>

推荐答案

.ajax（{
url：' JsonPaging.aspx / GetTableData'，
data： JSON .stringify（{tableName：name}），
type：' post'，
contentType： application / json; charset = utf-8，
dataType： json，
成功： function （响应）{
debugger ;
var json = JSON .parse（response.d）;
generateTable（json）;

}，
错误： function （a，b，c）{
console .log（a，b，c）;
}
}）;
}

// function funChange（ddlObj1）{
// var name1 = ddlObj1.value;
// 调试器;
//

.ajax({ url: 'JsonPaging.aspx/GetTableData', data: JSON.stringify({ tableName: name }), type: 'post', contentType: "application/json; charset=utf-8", dataType: "json", success: function(response) { debugger; var json = JSON.parse(response.d); generateTable(json); }, error: function(a, b, c) { console.log(a, b, c); } }); } // function funChange(ddlObj1) { // var name1 = ddlObj1.value; // debugger; //

.ajax（{
// url：'JsonPaging.aspx / Paging'，
// data ：JSON.stringify（{tableName：name1}），
// type：'post '，
// contentType：application / json; charset = utf-8，
// dataType：json，
// success ：function（response）{
// debugger;
// var json = JSON.parse（response.d）;
// paging（json）;
// }，
// 错误：功能（a，b，c）{
// console.log（a，b， c）;
// }
// <跨度class =code-comment>}）;
// }

// function paging（json）{
// var

.ajax({ // url: 'JsonPaging.aspx/Paging', // data: JSON.stringify({ tableName: name1 }), // type: 'post', // contentType: "application/json; charset=utf-8", // dataType: "json", // success: function(response) { // debugger; // var json = JSON.parse(response.d); // paging(json); // }, // error: function(a, b, c) { // console.log(a, b, c); // } // }); // } // function paging(json) { // var

table =

这篇关于如何重新数据化datatable jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！