서버 측 데이터 테이블

Question

.net에 처음 참가했습니다. DataTable 예제를 만들고 싶습니다. 내 테이블은 "SQL"관리 스튜디오에 있습니다. 테이블을 내 DataTable에로드하고 싶습니다. 내가 어떻게 할 수 있니? 연결 문자열을 사용하여 테이블을 가져올 수 있지만 어떻게 수정합니까 DataTable?

가지고 계시다면 코드를 보여주십시오. 나는 초보자라는 것을 잊지 마라. 명확하게 설명하십시오.

나는 다음과 같은 몇 가지 코드를 가지고 :

이

<script type="text/javascript" > 
    $(document).ready(function() { 
     $('#example').dataTable({ 
      "bProcessing": true, 
      "bServerSide": true, 
      "sAjaxSource": "somefile" 
     }); 
    }); 
</script> 

나 한테 설명해주십시오. 사전에

감사합니다.

Answer 1

내가 및 자바 스크립트 약 9 개월 전에 .NET 매우 새로웠다 (틀림없이 여전히 오전), 당신에게 격려를 부여하려면하지만, 난 여전히 아주 좋은, 기능 데이터 테이블을 만들 datatables.net에 자원을 사용할 수 있었다 ASP.net과 SQL 서버를 사용합니다. 몇 가지 제안 :

먼저 다음 examples page, API reference 및 datatables.net에 forums 당신의 가장 좋은 자원이 될 것입니다. 테이블을 참조 페이지를 통해 비교적 간단하게 찾을 수있게하기 위해 몇 가지 복잡한 방법을 코딩하는 데 이미 시간을 할애 했으므로 이미 그렇게 쉽고 정교한 기본 방법이있었습니다.

두 번째 : 당신이 MVC를 사용하고 (아래 참조되지 않은 경우) 서버 측 처리를 할 정말 필요한 있다면, datatables.net으로이를 설정하는 방법에 대한 코드 프로젝트에 큰 tutorial있다.

세 번째 : 서버 측 처리를 통해 테이블에서 데이터를 렌더링하는 방식을 제어 할 수 있지만 손으로 ​​정렬 및 페이지 매김 기능을 코딩해야합니다. 내가 사용하는 대체 방법은 bServerSide이없는 테이블의 sAjaxSource 초기화 옵션입니다.이 방법을 사용하면 데이터 테이블 플러그인이 모든 무거운 것을 수행하면서 외부 (AJAX) 소스에서 데이터를 동적으로로드 할 수 있으므로 리프팅. 여기에 내가 가지고있는 설정입니다 (이것은 너무 단순한 경우 나는 사과) :

1. 나는 지정된 각 열의 단지 헤더, 내 HTML에 빈 테이블이있다. thead 및 tbody 태그가 있는지 확인하십시오.

2. .NET 프로젝트에서 새 "일반 처리기"(확장명은 .ashx 여야 함)를 만듭니다. 이 핸들러는 데이터에 대한 기본 페이지의 요청을 처리합니다 (아래 참조). 여기에서는 다음을 수행합니다.

   a. 내 SQL 데이터베이스에 연결

   b. 내가 찾고있는 테이블의 뷰를 가져옵니다.

   c. 각 행을 객체로 구문 분석합니다 (이 경우 새 클래스를 만들었습니다)

   d. 내 "행 객체"의 배열을 JSON 객체로 직렬화하십시오. 데이터 객체가 데이터와 함께 작동 할 수있는 가장 쉬운 방법이 될 것이므로,

   e.다시 나는이 작업을 수행하는 데 사용하는 내 코드를 공유 드리겠습니다 페이지

   에 대한 응답을 작성,하지만 난 이미 너무 오래되고이 게시물을 느낄 수있다, 그래서 그냥 당신이 그것을 원하는 경우 알려주세요. $(document).ready 함수 내

3. I 다음 설정 페이지의 javascipt 내 데이터 테이블을

   . 내 AJAX 소스로 .ASHX 파일을 사용하고 난 내 JSON 객체의 각 열에 대한 키로 사용할 이름을 지정 - mDataProp 옵션을 사용하여 :

   oTable = $("#production_table").dataTable({    
       "sAjaxSource": 'Data.ashx', 
        //^Change this ashx filename based on 
        // the file you created above in #2 
       "aoColumns": [ 
        { "mDataProp": "column1" }, 
        { "mDataProp": "column2" }, 
        { "mDataProp": "column3" } ] 
   }); 
   

행운을 빕니다!