데이터 요소
DataTables jQuery 플러그인에의 한 OData 분석
Julie Lerman
Open Data Protocol (OData)를 사용 하 여 데이터를 만드는 사람은 웹을 통해, HTTP 기반 기술을 필요로 하는 모든 사용자가 사용할 수 있는 일반 형식으로 데이터를 제공할 수 있습니다. 데이터를 제공 하는 URI를 사용 하 여 데이터를 조작 하는 일반적인 HTTP 동사 (GET, POST, PUT, DELETE, MERGE)를 사용할 수 있습니다. 데이터 상호 작용은 JavaScript와 같은 언어를 사용 하 여 직접 처리 하거나 (Microsoft 클라이언트 API. NET Framework, PHP와 같은 Silverlight는 마이크로소프트가 제공 하는 API)를 사용 하 여 처리할 수 있습니다. 두 경우 모두 OData 피드를 똑같이 사용할 수 있습니다.
Netflix Inc.또는 eBay Inc에서 상용 서비스 공급, 월드컵의 데이터 서비스, 심지어는 150 년에 걸친 메이저 리그에 대 한 통계를 제공 하는 서비스 등 점점 더 많은 OData 서비스가 공개 되도록 설정 되어 있습니다.
데이터 액세스를 더욱 쉽게 되어 있습니다. 그러나 데이터 보기에 대해서는 어떨까요? 150 년에 달하는 메이저 리그 통계와 数千本에 달하는 영화 제목에 액세스할 수 있는 경우라도, 데이터를 검색 하 여 해당 데이터를 조작 하는 과정은 클라이언트에서 제공 하는 것입니다.
최근 Vermont. NET User Group jQuery에 대 한 프레 젠 테이 션에서 사용자가 많은 양의 데이터를 분석할 수 있는 저렴 한 투자 기법으로 DataTables 라는 jQuery 플러그인에 감동 했습니다. DataTables의 특징은 클라이언트측에서 처리 속도가 매우 빠른 속도로 이루어지기는 하지만 필요 하다 면 서버 쪽 코드에서 많은 작업을 수행할 수 있습니다.
JQuery는 자바 스크립트 작업을 단순화 하는 클라이언트측 웹 기술입니다 (또한 어떤 종류의 웹 응용 프로그램에서 사용할 수 있습니다). JQuery 시류를 타는 사람들과 대화 하면 뉴질랜드인 jQuery에 열정을가지고 있음을 알 수 있습니다. DataTables는 엄청난 숫자에 떠오르는 jQuery 플러그인입니다. JQuery는 모든 종류의 웹 응용 프로그램에서 사용할 수 있습니다.
이 칼럼에서는 많은 작업을. NET Framework에서 실시 하는 관계로 이번 달에는 ASP. MVC와 ASP. NET NET 웹 폼을 사용 하는 응용 프로그램에 대해 알아보고, DataTables 플러그인의 기본 기능 중 일부를 소개 합니다. 그러나 웹 폼 응용 프로그램의 논리는 클라이언트측 코드에서 발생 합니다. I’ll be working with the Netflix OData service (http://odata.netflix.com/v1/Catalog), which gives me an opportunity to show you how to deal with some common pitfalls you may encounter when using various OData services.
You can download the DataTables plug-in from datatables.net. If you’re new to consuming OData, you might want to get up to speed by visiting the WCF Data Services section of the MSDN Developer Center at msdn.microsoft.com/data/odata.
LINQ와 클라이언트 API를 사용 하 여 OData 쿼리
우선, MVC 응용 프로그램에서 간단한 작업을 시작 합니다. 이 항목에서는 Visual Studio의 서비스 참조 추가 마법사를 사용 하 여 http://odata.netflix.com/v1/Catalog에 대 한 서비스 참조를 추가 합니다. 따라서 응용 프로그램에서 사용 하는 프록시 클래스가 생성 된 서비스를 기준으로 Entity Data Model을 작성 됩니다 (그림 1 참고). 마법사는. NET Framework OData API 클라이언트 라이브러리에 대 한 참조도 추가 해야 합니다. . NET Framework와 Silverlight OData 클라이언트 라이브러리는 LINQ 쿼리를 지원 하기 위해 OData의 작업을 매우 쉽게 수행할 수 있습니다.
.png)
그림 1솔루션 탐색기에서 MVC 프로젝트
My startup controller, HomeController.cs, uses the OData client library and the service proxy to query for all of the movie titles in a particular genre: Independent. 쿼리 결과는이 컨트롤러의 특정 작업에 연결 된 보기에 표시 됩니다.
public ActionResult Index() {
var svcUri = new Uri("http://odata.netflix.com//v1//Catalog");
var context = new NetflixOData.NetflixCatalog(svcUri);
var query = from genre in context.Genres
where genre.Name == "Independent"
from title in genre.Titles
where title.ReleaseYear>=2007
select title ;
var titles = query.ToList();
return View(titles);
}
HomeController Index 뷰 (\Views\Home\index.aspx)가 재미 있는 표시 논리를 모두 수행할 수 있습니다. DataTables jQuery와 플러그인을 사용할 수 있는 스크립트 파일을 프로젝트에 추가 해야 합니다. 또한 일련의 온라인 스크립트를 볼 수 있습니다 (Microsoft AJAX Content Delivery Network (asp.net/ajaxLibrary/CDN.ashx, 영문) 참조), 여기서 스크립트를 로컬로 호스팅하는 것입니다. 다운로드 한 플러그인 DataTables 프로젝트에 추가할 수 있는 (스크립트 포함) \media 폴더를 포함 합니다. You can see I’ve already done this in Figure 1.
Figure 2 contains the code listing of the Index.aspx file.
그림 2HomeController의 Index.aspx
<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master"
Inherits="System.Web.Mvc.ViewPage<IEnumerable<Title>>" %>
<%@ Import Namespace="JQueryMVC.Controllers" %>
<%@ Import Namespace="JQueryMVC.NetflixOData" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent"
runat="server">
Home Page
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent"
runat="server">
<head>
<link href="../../media/css/demo-table.css"
rel="stylesheet" type="text/css" />
<script src="../../media/js/jquery.js"
type="text/javascript"></script>
<script src="../../media/js/jquery.dataTables.js"
type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$('#Netflix').dataTable();
});
</script>
</head>
<div>
<table id="Netflix">
<thead><tr><th>Title</th>
<th>Rating</th>
<th>Runtime</th></tr></thead>
<tbody>
<% foreach (Title title in Model)
{ %>
<tr><td><%= title.Name %> </td>
<td><%= title.AverageRating %></td>
<td><%= title.Runtime %></td></tr>
<% } %>
</tbody>
</table>
</div>
</asp:Content>
<head>섹션의 시작 부분에 있는 CSS 링크와 2 개의 스크립트 소스는 CSS 서식 설정 및 핵심적인 자바 스크립트 jQuery와 jQuery.datatables 파일을 참조 하십시오.
다음은 페이지에 표시 되는 테이블에 대해 설명 합니다. DataTables 플러그인 테이블의 ID와 <thead>섹션에 저장 된 헤더 정보를 사용 합니다. 그 다음 몇 줄의 코드로 HomeController.cs 파일에서 보기에 전달 하는 IEnumerable <title>를 반복 하 고 해당 열에 대 한 Name, AverageRating 및 Runtime의 값을 표시 합니다.
페이지가 처음 로드 될 때, head 태그 JavaScript 메서드를 jQuery를 사용 하 여 양식에 있는 Netflix 테이블을 찾은 다음이 테이블을 dataTable 함수를 적용 합니다. DataTables 조밀한 구성이 가능 하지만이 처럼 간단한 dataTable 형식으로 함수를 호출 하면 참조 되는 테이블 (Netflix)는 DataTables의 기본 구성을 가져옵니다. Figure 3 shows the resulting page.
.png)
그림 3DataTables 플러그 인이 데이터 표시
DataTables에서 생성 한 테이블에는 CSS를 사용 하는 테이블에 비해 외형이 우수 합니다. 페이지 아래쪽에 줄, 155 검색 했는지를 확인할 수 있음을 알 수 있습니다. 기본적으로 페이지당 10 개 항목이 표시 되도록 클라이언트측 페이지가 설정 되지만 사용자가 드롭다운 목록을 사용 하 여 페이지당 25 개, 50 개 또는 100 개의 항목을 표시 하도록 선택할 수 있습니다. [Search] (검색) 상자에는 테이블 내에서 액세스할 수 있는 모든 열에 대 한 검색 결과를 기준으로 결과를 필터링 합니다. 사용자가 행 머리글을 클릭 하 여 데이터를 정렬할 수도 있습니다. The DataTables plug-in feature set is so rich that there are even plug-ins for the plug-in. You can learn much more about enhancing the default on the datatables.net Web site.
클라이언트에서 OData 쿼리
반드시 클라이언트 API를 조작할 수 있는 것은 아니기 때문에 이번에는 다른 작업이 라이브러리 중 하나 (AJAX 클라이언트 라이브러리)를 사용 하지 않고 클라이언트에서 넷 플 릭 스 OData를 쿼리 하는 더 어려운 작업을 시도해 보겠습니다. 이 작품 에서도 DataTables 플러그인을 사용 하지만 Netflix 서비스에서 발생 하는 문제를 해결 합니다. 공개적으로 접속할 수 있는 다른 OData 서비스를 사용 하면서도 Netflix 서비스와 동일한 제한 사항이 발생 하는 경우가 많습니다.
이 태스크에서 ASP. NET 웹 폼 응용 프로그램을 사용할 수 있지만이 페이지의. NET Framework는 코드를 사용 하지 않으므로 기존의 일반 HTML을 사용할 수도 있습니다. 이 응용 프로그램에도 \media 폴더에 필요 하지만 서비스에 대 한 프록시를 만들 수 없기 때문에 서비스 참조 추가 마법사를 사용할 필요는 없습니다.
DataTable 함수에는 sAjaxSource 라는 대상 원본에서 데이터를 자동으로 검색 하는 메서드가 있습니다. 그러나이 방법을 사용 하려면 결과 형식이 특정 방법을 따라야 합니다. OData의 결과는이 방법을 따르지 않습니다. 캘리포니아에 거주 하는 개발자, Jeff Morris 뛰어난 블로그 게시물에서 WCF 데이터 서비스 쿼리 인터셉터에서 OData 결과를 성형 하는 방법에 대해 설명 합니다. You can read the post at bit.ly/bMPzTH.
이번에는이 방법을 사용 하지 않고 AJAX를 사용 하 여 OData을 네이티브 형식으로 반환 하 고 직접 테이블에 데이터를 설정 합니다.
페이지 본문의 시작 부분에 다음과 같이 테이블을 만들고 이들 <thead>섹션을 정의 합니다 (DataTables 필요), 빈 <tbody>여기에 추가 됩니다.
<body>
<form id="form1" runat="server">
<table id="Netflix" width="100%">
<thead>
<tr><th width="50%">Title</th>
<th>Rating</th>
<th>Runtime</th></tr>
</thead>
<tbody id="netflixBody"/>
</table>
</form>
</body>
The page has a number of functions: GetData, displayResults and a helper function to deal with one of the current shortcomings of the Netflix service. OData 용. NET 클라이언트 라이브러리와 마찬가지로 AJAX 클라이언트 라이브러리도 Microsoft ASP. NET AJAX API의 일부로 제공 됩니다. 다음 AJAX 문서에서 발췌 한 예제에서는 JavaScript에서이 쿼리는 OData 라이브러리의 사용에 매우 유사 하다는 것을 보여 줍니다.
function doQuery() {
var northwindService = new
Sys.Data.OpenDataServiceProxy("/Northwind.svc");
northwindService.query("/Customers", cbSuccess, cbFailure, userContext);
또한 앞으로 설명할 예제와 같이 있는 그대로 AJAX와 jQuery를 사용 하는 것도 가능 합니다. 에서는 getData 함수가 포함 된 경우 머리글 스크립트의 시작 부분을 살펴보도록 하겠습니다.
<script type="text/javascript" charset="utf-8">
var oTable;
var query = "http://odata.netflix.com/v1/Catalog/Titles?$orderby=Name&$top=500"
$(document).ready(function () { getData() });
function getData() {
var url = query + "&$callback= displayResults"
+ "&$format=json";
$.ajax({ dataType: "jsonp", url: url });
}
When the page begins, the document.ready function automatically calls getData. getData constructs a URL from the pre-defined OData query and appends parameters to return the OData as JSON (an alternative to the default AtomPub format), as well as defining the method to be executed when the AJAX call is complete.
AJAX 호출이 완료 되 면 OData 쿼리 결과를 사용 하 여 displayResults 함수를 호출 합니다 (그림 4 참고).
그림 4OData의 결과를 표시 하려면
function displayResults(results) {
var entities;
var redraw;
// Find data in results
if (results.d[0] == undefined) {
queryNext = results.d.__next;
entities = results.d.results;
}
else {
queryNext = "";
entities = results.d;
}
// Instantiate dataTable if necessary
if (oTable ==null)
oTable = $('#Netflix').dataTable();
// Build table rows from data using dataTables.Add
for (var post in entities) {
if (post == queryResults.length-1)
redraw = true; //only redraw table on last item
else
redraw = false;
oTable.fnAddData([
entities[post].Name, entities[post].Rating,
entities[post].Runtime],redraw);
}
// Continue retrieving results
if (queryNext > "") {
query = FixNetFlixUrl(queryNext);
getData();
}
}
"Find data in results"라는 주석을 추가한 부분 전술 Netflix 제한 사항 중 하나를 처리 하 고 있습니다. Netflix은 서버를 보호 하기 위해 서버 쪽에서 페이지 전환을 강제할 수 단일 요청에서 반환 되는 줄을 500 행으로 제한 합니다. 사용자가 고를 아끼고 모든 영화를 쿼리 한 후에는 어떻게 될까요? 이러한 상황이 자주 발생 합니다. 서버측 페이지 전환에서 추가 행을 검색 하는 것은 제한 되지 않습니다. 명시적으로 검색 해야 합니다.
클라이언트에서 많은 양의 데이터를 처리 하는 이유는 DataTables 주특기 분야 이기 때문에이 특징을 이용 하는 좋은 기회입니다. 대용량 (5000 행)에서 데이터를 검색 하는 경우 모든 데이터를 로드할 때까지 조금 시간이 오래 걸릴 수 있지만, 데이터를 메모리에 저장 되어 버리면 DataTables를 통해 최종 사용자는 데이터에 대해 자유롭게 필터링 하 고 정렬할 수 있습니다.
처음 DataTables 데모 체험 하면 발표자는 DataTables 80000 행을 다운로드할 엔터프라이즈 보고서 작성 도구를 사용 하 고 있다고 말했습니다. 인터넷에 서버를 이렇게 높게 평가 하는 것에 대해 큰소리로 시위 했는데, DataTables 동작을 목격 하는 관리 되는 시나리오의 경우, 이러한 사용에 대해서는 그다지 반대 하지 않습니다.
OData에 추가 데이터를 요청할 수 있는 방법을 제공 하 고, Netflix는이 연결 고리를 제공 하 고 있습니다. 501 개 결과를 요청 하는 쿼리는 다음과 같습니다.
http://odata.netflix.com/v1/Catalog/Titles?$orderby=Name&$top=501
쿼리를 서비스의 이러한 종류의 제한을 초과 하는 경우에는 OData의 Netflix 연속 토큰 기능을 사용 합니다. 결과에는 기본적으로 반환 되는 항목 외에도 마지막 항목이 다음과 같은 요소가 들어 있습니다. AtomPub 형식을 다음과 같습니다.
<link rel="next"
href="http://odata.netflix.com:20000/v1/Catalog/Titles/?$orderby=
Name&$top=1&$skiptoken='1975%20Oklahoma%20National%20Championship%20
Game','BVZUb'" />
</feed>
Skiptoken 매개 변수는 다음 결과 집합의 시작을 쿼리에 지시 합니다. JSON을 사용 하면이 항목은 반환 값의 앞에 __next 라는 속성에 저장 됩니다. (그림 5 참고).
.png)
그림 5서비스로 구성 되는 반환 값의 최대값 보다 많은 데이터를 요청할 경우 JSON 결과
쿼리 시간 제한을 초과 하는 경우 해당 항목은 d 속성에 직접 포함할 수 있습니다 (그림 6 참고). GetData에서 결과를 찾을 지 여부를 테스트 해야 하는 것은이 때문입니다. 연속 토큰은이 토큰을 queryNext 변수에 저장 하 고 전체 결과 집합을 메모리에 생성 하기 때문에 계속 해 서 쿼리를 실행 합니다.
.png)
그림 6구성 되는 반환 금액을 초과 하지 않는 데이터를 요청 하는 경우 JSON 결과
__Next 속성을 확인 하면 Netflix에서 20000 포트 번호가 추가 된 것을 알 수 있습니다. 그러나이 쿼리를 직접 실행 하면 오류가 발생 합니다. 따라서 다음과 같은 데이터를 요청 하기 전에이 포트 번호는 URI에서 제거 해야 합니다. 이는 요청을 실행 하기 전에 FixNetFlixUrl 함수를 호출 합니다.
공개적으로 접속할 수 있는 OData 서비스를 사용 하면 이러한 문제에 유의 해야 합니다. 성공적으로 반환 되는 결과의 수가 제한 되는 서비스 또는 연속 토큰에 따라 큰 변화를 강요 하는 서비스에 대 한 접근 방식에 대해 설명 했습니다.
DisplayResults 메서드는 결과 집합에 대해 DataTables의 fnAddData 메서드를 사용 하 여 각 항목이 테이블에 추가 합니다. 테이블을 다시 그리는 데는 많은 리소스가 필요 하므로, 여기에는 결과의 마지막 항목에 도달할 때까지 fnAddData redraw 메서드의 매개 변수를 false로 설정 합니다. 데이터를 가져오는 동안 다시 그리면 5000 행을 모두 받을 때까지 기다렸다가 테이블에 추가 하는 것에 비해 UI의 운동이 부드럽게 됩니다.
버몬트의 가난한 인터넷 접속 환경에서는 5000 행을 반환 하는 기본 쿼리를 변경 하 고 검색을 완료할 때까지 다시 표시 기능을 지연 하 여 모든 행을 검색 하 여 테이블을 가져올 때까지 1 분 정도 걸렸습니다. 각 행을 다시 표시 하는 것이 훨씬 빠르고, 행 추가 중 에서도 테이블을 사용 합니다. 이는 즐거운 놀라움 이었다.
모든 행을 테이블에 5000으로 설정 하면 DataTables 정렬 및 찾기에 대단한 위력을 발휘 했습니다. 정렬 하는 데 소요 된 시간은 1 초 미만 이었습니다. 검색 상자에 문자를 입력할 때마다 결과를 반환 하기 때문에 검색을 즉시 완료 되었습니다 (그림 7 참고).
.png)
그림 7DataTables에서 실시간 검색 결과
Internet Explorer 8에 대해 세부 조정
최근 업데이트는 DataTables Internet Explorer 8의 기능을 하도록 되었습니다. 그러나이 기능은 DataTables에서 큰 결과 집합을 조작 하는 경우에는 전혀 바람직하지 않습니다. 실행할 스크립트의 줄 수가 너무 많을 경우 Internet Explorer는 경고 메시지가 표시 됩니다.
Microsoft 지원 사이트에서는 클라이언트 컴퓨터의 레지스트리를 조정 하 여이 동작을 변경 하는 것이 좋습니다. 이 응용 프로그램의 동작을 수정 하려면 솔루션으로 서 이것은 유효 하지 않습니다. 가능 하면 클라이언트 레지스트리 설정을 사용 하지 않도록 합니다. 그럼, 또 다른 해결 방법은 있습니다.
사용자 포럼에 관한 DataTables 있는 게시물은 DataTables 스크립트 파일을 수정 하는 것을 제시 하 고 있습니다. 이 변경 내용을 적용 하면 믿을 수 없을 만큼 향상이 있었습니다. You can see the details in the forum thread titled, “Sorting causes IE to throw ‘A script on this page is causing Internet Explorer to run slowly,’” at bit.ly/co4AMD.
공부 하는 많은 기능
Hopefully you’ve already seen enough to understand my excitement over this extensive plug-in. There’s a lot more that you can do to configure a table’s look—as well as its behavior—in the read-only scenario I’ve demonstrated. DataTables에서 원활 하 게 편집할 수 있고, 또한 이러한 논리 서버에 다음 유지 하면 DataTables의 장점을 살리면서이 작업을 수행할 수 있습니다.
공개적으로 접속할 수 있는 서비스 OData가 점점 증가 하 고 있는 가운데, DataTables를 사용 하면 최종 사용자가 많은 양의 데이터를 분석할 수 있게 되는 것은 고급 개발자에 게 꿈 같은 조합 이다.
Julie Lerman is a Microsoft MVP, .NET mentor and consultant who lives in the hills of Vermont. 전 세계 사용자 그룹 및 컨퍼런스 등의 Microsoft 데이터 액세스. NET Framework 주제에 대 한 프레 젠 테이 션을 하 고 있습니다. Lerman blogs at thedatafarm.com/blog and is the author of the highly acclaimed book, “Programming Entity Framework” (O’Reilly Media, 2010). Follow her on Twitter.com: @julielerman.
Thanks to the following technical experts for reviewing this article: Rey Bango and Alex James