معرفی
در این مقاله قصد دارم نحوه استفاده و ادغام جدول داده jQuery با AngularJS را توضیح دهم. DataTable یک عملکرد پیش ساخته و یک افزونه برای کتابخانه جاوا اسکریپت jQuery است. این یک ابزار بسیار منعطف است که بر اساس پایه های پیشرفت پیشرونده است. این کنترل های تعاملی پیشرفته را به هر جدول HTML اضافه می کند.
مروری بر روند
- یک صفحه وب برای نمایش داده ها ایجاد کنید.
- داده ها را از لیست شیرپوینت دریافت کنید.
- به جدول داده های جی کوئری در هدر فایل HTML مراجعه کنید.
- جدول داده jQuery را با AngularJS ادغام کنید.
مرحله 1
یک صفحه وب با نمای جدول ایجاد کنید تا داده هایی را که از کد اسکریپت دریافت می کنیم نمایش دهد.
HTML
در اینجا کد HTML برای ظاهر و احساس صفحه وب بالا آمده است. برای ادغام جدول داده جی کوئری به نمای جدول نیاز داریم.
- <table width="100%" cellspacing="0" border="1">
- <thead id="TblHead">
- <tr>
- <td>View</td>
- <td>Req No.</td>
- <td>Vendor</td>
- <td>Date Required </td>
- <td>Requisition Date</td>
- <td>Approval Status</td>
- <td>Order Status</td>
- <td>Notify</td>
- </tr>
- </thead>
- <tbody>
- <tr ng-repeat="MyOrder in MyOrders">
- <td><a title='Click to view' href="#" target='_blank' class='btn btn-info btn-md'><span class='glyphicon glyphicon-user'></span> View</a></td>
- <td> {{MyOrder.OrderFrom}}</td>
- <td>{{MyOrder.Vendor}}</td>
- <td>{{MyOrder.DateRequired | date}}</td>
- <td>{{MyOrder.RequisitionDate | date}}</td>
- <td>{{MyOrder.WorkStatus}}</td>
- <td>{{MyOrder.OrderStatus}}</td>
- <td>Notify</td>
- </tr>
- </tbody>
- </table>
جایی که همه تگهای <tr> طبق دادههای موجود در لیست با استفاده از دستورالعمل ng-repeat AngularJS تکرار میشوند.
گام 2
تمام داده ها را از لیست شیرپوینت در بارگذاری صفحه دریافت کنید. این کد اسکریپت برای بازیابی داده ها از لیست شیرپوینت با استفاده از Angular با تماس REST است.
- $http({
- method: 'GET',
- url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('RequisitionOrders')/Items",
- headers: {
- "Accept": "application/json;odata=verbose"
- }
- }).success(function(data, status, headers, config) {
- Console.log(data.d.results);
- }).error(function(data, status, headers, config) {});
مرحله 3
جدول داده های جی کوئری را با AngularJS مانند زیر ادغام کنید.
در فایل HTML
خط زیر را در فایل HTML خود تایپ کنید. شناسه در HTML به اتصال عملکردهای جدول داده به کل جدول کمک می کند.
- <table width="100%" cellspacing="0" id="user_table" class="users list dtable" border="1">
در اسکریپت