데이터를 재초기화하는 방법MVC에서 Ajax를 사용하여 서버에서 새로 가져온 데이터가 있는 테이블

데이터를 재초기화하는 방법MVC에서 Ajax를 사용하여 서버에서 새로 가져온 데이터가 있는 테이블

관리자용 메뉴 목록과 그 아래에 Upload newsupload news가 있습니다.이 특정 메뉴를 클릭하면 아래와 같이 partial view를 호출합니다.

$("#body_data").load("/Admin/GetDailyNews", function () {
          $("#dailyNews").dataTable({
                    "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                    "columnDefs": [{ "targets": 3, "orderable": false }],
                    "pagingType": "full_numbers",
                    "oLanguage": { "sSearch": "" },
                    "deferRender": true
          });
}

AdminController의 PartialViewResult는 다음과 같습니다.

[HttpGet]
public PartialViewResult GetDailyNews()
{
     var context=new MyContext();
     List<AVmodel.NewsEventsViewModel> model = new List<AVmodel.NewsEventsViewModel>();
     List<news> news = (from n in context.news where n.stdate >= System.DateTime.Now orderby n.stdate descending select n).ToList();
     foreach (var NEWS in news)
     {
          model.Add(new AVmodel.NewsEventsViewModel()
          {
               EDate = NEWS.stdate,
               EDesc = NEWS.brief,
               EName = Convert.ToString(NEWS.name),
               NID = NEWS.nid
          });
     }
     return PartialView("_UploadNews", model);
}

제 _UploadNews.cshtml은 다음과 같습니다.

@model IEnumerable<MCB.Models.BusinessObjects.AVmodel.NewsEventsViewModel>
<table id="dailyNews" cellspacing="0" width="100%" class="table table-condensed table-hover table-responsive table-bordered order-column">
     <thead>
           <tr>
               <th>Event Date</th>
               <th>Event Name</th>
               <th>Detailed News</th>
               <th class="disabled">Actions</th>
          </tr>
     </thead>
     <tbody>
          @foreach (var news in Model)
          {
               <tr data-row="row_@news.NID">
                   <td>@news.EDate.Date.ToShortDateString()</td>
                   <td>@Convert.ToString(news.EName)</td>
                   <td>@Convert.ToString(news.EDesc)</td>
                   <td><button class="btn btn-primary" data-target="#editAddNews" data-toggle="modal" onclick="javascript: EditNews(this);" data-info="data_@news.NID"><span class="fa fa-edit"></span> </button>&nbsp; <button class="btn btn-danger" onclick="javascript: DeleteNews(this);" data-info="data_@news.NID"><span class="fa fa-trash-o"></span></button></td>
               </tr>
          }
     </tbody>
</table>

그래서 지금까지는 좋아요.모든 것이 잘 진행되고 있고 테이블에는 미래의 뉴스만 표시됩니다.관리자가 과거 일수를 포함한 모든 뉴스를 테이블에서 가져올 수 있는 옵션이 있습니다.그래서 부분 뷰에 다음과 같은 부트스트랩스위치 타입의 체크박스를 계속 켜놓았습니다.

<input type="checkbox" name="fetchNews-checkbox" data-on-text="All News" data-off-text="Upcoming News" data-on-color="primary" data-off-color="default" data-label-width="100px" data-label-text="News details">

가 쓴 요.onswitchchange다음과 같이 특정 체크박스에 대해 설명합니다.

$("[name='fetchNews-checkbox']").on('switchChange.bootstrapSwitch', function (event, state) {
     if (state) 
     {
           fetchNews('all');
     }
     else 
     {
           fetchNews('upcoming');
     }
});

나의 ★★★★★★★★★★★★★★★.fetchNews을 사용하다

function fetchNews(context)
{
    if(context!="")
    {
        $("#dailyNews").dataTable({
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "/Admin/FetchNews"
        });
    }
}

이 기능이 호출되면 다음과 같은 알림이 표시됩니다.

DataTables 경고: table id=daily뉴스 - DataTable을 다시 초기화할 수 없습니다.이 에러의 상세한 것에 대하여는, http://datatables.net/tn/3 를 참조해 주세요.

위의 링크를 방문했지만 아무것도 알 수 없었습니다.컨트롤러 json 메서드를 호출하고 뉴스 목록을 이 테이블에 렌더링하는 방법을 알려주시겠습니까?

오류 메시지 http://datatables.net/tn/3은 문제를 정확하게 나타냅니다.에서 다른 옵션을 사용하여 테이블을 다시 초기화합니다.fetchNews().

먼저 테이블을 파기해야 합니다.http://datatables.net/manual/tech-notes/3#destroy 를 참조해 주세요.그럼 할 수 있어요$("#dailyNews").dataTable().fnDestroy() 1 . ) ( DataTables 1 . 9 . x )$("#dailyNews").DataTable().destroy()(DataTables 1.10.x).

function fetchNews(context)
{
     if(context!="")
     {
        // Destroy the table
        // Use $("#dailyNews").DataTable().destroy() for DataTables 1.10.x
        $("#dailyNews").dataTable().fnDestroy()

        $("#dailyNews").dataTable({
           // ... skipped ...
        });
    }
}

1.를 있는 는, 을 「」DataTables 1.10 으로 할 수 .x를 사용하는 경우 추가 옵션으로 새 테이블을 초기화할 수 있습니다."destroy": true해 주세요

function fetchNews(context)
{
     if(context!="")
     {
        $("#dailyNews").dataTable({
            "destroy": true,
            // ... skipped ...
        });
    }
}

이 방법은 많은 조사 끝에 도움이 되었습니다.- 먼저 dataTable이 존재하는지 여부를 확인하고 dataTable이 파괴되면 다시 작성합니다.

if ($.fn.DataTable.isDataTable("#mytable")) {
  $('#mytable').DataTable().clear().destroy();
}

$("#mytable").dataTable({...
                       
                });

데이터 테이블에는 검색 옵션이 있습니다.비활성화 후 테이블이 다른 콘텐츠를 수신할 경우 파라미터 retrieve: true, 를 설정할 수 있습니다.

매뉴얼은 https://datatables.net/reference/option/retrieve 에서 보실 수 있습니다.

$("#body_data").load("/Admin/GetDailyNews", function () {
      $("#dailyNews").dataTable({
                retrieve: true,
                "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, "All"]],
                "columnDefs": [{ "targets": 3, "orderable": false }],
                "pagingType": "full_numbers",
                "oLanguage": { "sSearch": "" },
                "deferRender": true
      });

}

$('#mytable').DataTable().destroy(); $('#mytable').html("");

위의 답변은 증상을 치료하지만('재초기화할 수 없음' 경고) 문제의 근본 원인을 해결하지 않습니다.jQuery 내에서 DataTable을 입력하지 마십시오.$.load()/$.ajax()/$.get()/$.post()성공 콜백: 비동기 AJAX 콜의 성질에 의해 발생하는 모든 종류의 문제가 발생하기 때문입니다.

DataTables 호출.destroy()방법은 서버로부터 데이터를 취득할 때마다 불필요하게 파기하고 DataTable을 새로 작성하기 때문에 상황을 더욱 악화시킬 수 있습니다.이것은 최소한 퍼포먼스를 낭비하는 것입니다.

대신 DataTables 옵션을 사용해야 합니다.이 옵션을 사용하면 DataTables API 메서드의 이점을 충분히 얻을 수 있고 퍼포먼스를 망치지 않습니다.예를 들어 최신 데이터를 로드하기 전에 URL을 변경할 필요가 있는 경우입니다.

OP 예제의 완전한 라이브 DEMO는 다음과 같이 단순해 보일 수 있습니다.

//initialize DataTables
const dataTable = $('#newsTable').DataTable({
	//specify AJAX source, params and response source
	ajax: {
		url: 'https://newsapi.org/v2/everything',
		data: () => ({
				q: ($('input[name="subject"]:checked').val() || 'javascript'),
				language: 'en',
				apiKey: '699ba21673cd45aba406b1984b480b60'
		}),
		dataSrc: 'articles'
	},
	//set up table columns
	columns: [
		{title: 'Source', data: 'source.name'},
		{title: 'Title', data: 'title'},
		{title: 'Content', data: 'content'}
	]
});

//trigger table data re-fetch with new subject
$('input[name="subject"]').on('change', () => dataTable.ajax.reload())

<!doctype html>
<html>
<head>
  <script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script type="application/javascript" src="test.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <label>Pick the subject:</label>
  <input type="radio" name="subject" value="python">python</input>
  <input type="radio" name="subject" value="javascript">javascript</input>
  <table id="newsTable"></table>
</body>
</html>

다음과 같이 파기 속성을 제공하여 데이터 테이블을 매번 다시 초기화할 수 있습니다.

            .done(function(ret){
                $("#cloud").DataTable({
                   ordering : true,
                   pageLength : 20,
                   destroy: true,
                   data : loadData(ret)
                })
            });

$('#user List')라는 많은 조사 끝에 이 방법이 효과가 있었습니다.DataTable().clear().destroy();

이렇게 하면 새로운 콘텐츠가 포함된 데이터 테이블이 다시 로드됩니다.

$("#dailyNews").dataTable().ajax.reload();

언급URL : https://stackoverflow.com/questions/29150480/how-to-reinitialize-datatables-with-newly-fetched-data-from-server-using-ajax-in