สร้าง Shared Data Source เพื่อให้สามารถ Filter และ Paging ข้อมูลที่แสดงได้

ก่อนอื่น ต้องแนะนำ UI Libary ที่จะช่วยให้ชีวิตเราง่ายขึ้นเยอะ นั่นก็คือ

Kendo UI for jQuery

ตัว Component ที่เราจะหยิบเอามาใช้มี 2 ส่วนด้วยกัน

ส่วนที่ 1: ส่วนของการจัดการ Datasource

• Kendo Datasource

ส่วนที่ 2: ส่วนของการจัดการแสดง Data

• Kendo Pager
• Kendo Template

โดยตัว Component ทั้ง 2 ส่วน จะถูกนำมาสร้างและจัดการโดย Kendo MVVM

เรามาเริ่ม Coding กันเลยดีกว่า

1. วางโครงสร้างในส่วนของการแสดง UI

<!-- 1.1 div นอกสุดสำหรับวางขอบเขตของ HTML ที่จะนำไป Binding กับ observable -->
<div id="test">
   <!-- 1.2 input สำหรับให้ User กรอก fileter ที่ต้องการดู data -->
   <input class="k-textbox"
          data-bind="value: searchText, 
                     events: { change: onTextChange }" /> 
   <!-- 1.3 div สำหรับจัดการ data items ที่จะถูกแสดง  -->
   <div data-bind="source: dataSource" 
        data-template="item-template">
   </div> 
   <!-- 1.4 div สำหรับจัดการ pager -->
   <div data-role="pager" data-bind="source: dataSource"></div></div>

อธิบายเพิ่มเติม

ข้อ 1.2 สำหรับให้ User กรอก fileter ที่ต้องการดู data จะเป็น input ที่จะถูกนำ value เมื่อผู้ใช้กรอกแล้ว ไปทำการ filter data ผ่าน change event

ข้อ 1.3 div สำหรับจัดการ data items ที่จะถูกแสดง ภายใน div จะมี property อยู่ 2 ตัว คือ

• data-bind จะมีการกำหนด source คือ dataSource ซึ่งในส่วนนี้จะถูกจัดการโดย view-model
• data-template คือ การระบุ Id ของ HTML template ที่ต้องการให้แสดง ซึ่งแต่ละ item คือข้อมูลของ data item ที่อยู่ใน data source ที่ถูก binding ไว้ และแต่ละ item จะแสดงในรูปแบบเดียวกัน ตามที่ HTML template กำหนดไว้

2. ส่วนของ Item Template

<script type="text/html" id="item-template">
   <div>
      #=Name#
   </div>
</script>

ณ ที่นี้ data item แต่ละตัวจะแสดง Name

3. ส่วนของ view-model และการทำ data binding

เราสามารถกำหนด data source ได้หลายแบบ ณ ที่นี้จะพูดถึง 2 แบบที่ใช้บ่อยๆ คือ

แบบที่ 1 สร้าง kendo datasource แบบ Local data

แบบที่ 2 สร้าง kendo datasource แบบ Remote data

3. ยิง ajax เพื่อไปขอข้อมูลจาก controller

<script type="text/javascript">
   $(document).ready(function () {
      $.ajax({
         url: "@Url.Action("Test", "Test")",
         dataType: "json",
         type: "GET",
         contentType: "application/json",
         success: function (response) {
            var ds = new kendo.data.DataSource({
                       data: response, page: 1, pageSize: 2 });
            viewModel.set("dataSource", ds);
        }
      });
      var viewModel = kendo.observable({
         searchText: "",
         onTextChange: function (e) {
            if (!viewModel.dataSource) return;
            viewModel.dataSource.filter({ 
               field: "Name", 
               operator: "contains", 
               value: e.data.searchText });
         },
         dataSource: []
      });
      kendo.bind($("#test"), viewModel);
   });
</script>

4. ส่วนของ UI Controller

public class TestController : Controller
{
   public ActionResult Test()
   {
       return Json(new List<TestItem>
       {
          new TestItem{Name = "Aek", Value=1},
          new TestItem{Name="Mook",Value=2},
          new TestItem{Name="Art", Value=3},
          new TestItem{Name="Oppy", Value=4}
       }, JsonRequestBehavior.AllowGet);
    }
}

ผลลัพธ์ที่ได้

สามารถเข้าไปลอง Run code เพื่อดูตัวอย่างได้ที่ link ด้านล่าง

Kendo UI® Dojo by Progress