GrpSMK Ответов: 1

Как повторно инициализировать datatable jquery


подкачка и сортировка работают нормально в первый раз,когда мы выбираем выпадающий список, если я выбираю какой-то другой выпадающий список, это означает, что отображение старых записей и подкачка также не работают.Я хочу менять таблицу с подкачкой каждый раз, когда меняю выпадающий список.

окно предупреждения, показывающее, что невозможно повторно инициализировать таблицу данных.

пожалуйста, помогите мне решить мою проблему .

Что я уже пробовал:

<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>

1 Ответов

Рейтинг:
0

Ehsan Sajjad

Пожалуйста, обратитесь к следующей подробной статье, которая должна дать вам полное представление о том, как достичь того, чего вы пытаетесь достичь :

Таблицы с фильтрацией на стороне сервера, сортировка и разбиение на страницы в ASP.NET в MVC 5

Надеюсь, это поможет!


GrpSMK

работает нормально,но каждый раз, когда нужно обновить страницу, иначе не работает должным образом.,вот где я должен использовать окно.расположение.перезагрузка() функция?