تحسين ترقيم الصفحات في ng-table باستخدام Angular

في سياق استخدام Angular و ng-table لإعداد عنصر تحكم ترقيم صفحات مخصص، تظهر رغبتك في إضافة حقل إدخال يسمح فقط بأرقام صحيحة لتحديد الصفحة المراد الانتقال إليها. يبدو أن لديك تركيبة حالية تتضمن عنصر تحكم ترقيم الصفحات، وتسعى إلى إضافة حقل إدخال لتحسين تجربة المستخدم.

لتحقيق هذا الهدف، يمكنك إضافة حقل إدخال في القالب الخاص بترقيم الصفحات. يمكنك تحقيق ذلك عبر إضافة عنصر input في القالب الحالي، ومن ثم إضافة بعض السمات والأحداث لجعله يتفاعل بشكل صحيح مع التغييرات في الصفحات. اليك كود يوضح كيفية القيام بذلك:

pugCopy code
script(type="text/ng-template" id="ng-table-pagination-input")
  div(class="ng-cloak ng-table-pager" ng-if="params.data.length")
    br
    ul(ng-if="pages.length" class="pagination ng-table-pagination")
      li(ng-class="{'disabled': !page.active && !page.current, 'active': page.current}" ng-repeat="page in pages" ng-switch="page.type")
        a(ng-switch-when="prev" ng-click="params.page(page.number)" href="")
          span «
        a(ng-switch-when="next" ng-click="params.page(page.number)" href="")
          span »
        li(ng-show="page.type === 'page'")
          input(type="text" ng-model="currentPage" ng-change="validatePage()" ng-blur="goToPage()" ng-model-options="{ debounce: 500 }")

قد قمت بإضافة عنصر input داخل عنصر li حيث يكون نوع الصفحة “page”. قمت أيضاً بإضافة نموذج (ng-model="currentPage") لربط القيمة المدخلة بمتغير في نطاق Angular، وحدثي ng-change و ng-blur لتحديث والتحقق من القيمة عندما يقوم المستخدم بتغييرها أو يفقدها.

لاحظ أنه يمكن أن يتطلب هذا تحديثًا في وحدة التحكم (Controller) الخاصة بك أيضًا لتحديث البيانات والتحقق من الصفحة الحالية.

بالطبع، سأقدم لك مزيدًا من المعلومات حول كيفية تكامل حقل الإدخال لتحديد الصفحة في ترقيم الصفحات باستخدام Angular و ng-table.

1. إضافة المتغير في وحدة التحكم (Controller):
   في وحدة التحكم الخاصة بك، يجب عليك إضافة متغير يُربط بالقيمة المدخلة في حقل الإدخال. يمكنك القيام بذلك عبر تحديد متغير currentPage في نطاق Angular:

   javascriptCopy code
   angular.module('yourApp').controller('YourController', function ($scope) {
     // متغير يُربط بالقيمة المدخلة في حقل الإدخال
     $scope.currentPage = 1;
   
     // وظيفة للتحقق من صحة القيمة وتحديث الصفحة
     $scope.validatePage = function() {
       // يمكنك إضافة الشروط التحقق هنا
       if ($scope.currentPage < 1) {
         $scope.currentPage = 1;
       } else if ($scope.currentPage > $scope.pages.length) {
         $scope.currentPage = $scope.pages.length;
       }
     };
   
     // وظيفة للانتقال إلى الصفحة المحددة
     $scope.goToPage = function() {
       // يمكنك إضافة السلوك المخصص لانتقال إلى الصفحة هنا
       console.log('Navigating to page:', $scope.currentPage);
       // يمكنك استخدام هذا المكان لتحديث البيانات أو إجراء أي سلوك إضافي
     };
   });
   

2. تحديث القالب (Template):
   في القالب، قمت بإضافة متغير currentPage إلى حقل الإدخال (ng-model="currentPage") وأضفت وظيفتي ng-change و ng-blur للتحقق من صحة الصفحة والانتقال إليها عند الحاجة.

3. تخصيص السلوك:
   في وحدة التحكم، يمكنك تخصيص السلوك الخاص بك داخل وظيفة goToPage() لتحديث البيانات أو تنفيذ أي إجراء آخر يتعلق بالانتقال إلى الصفحة المحددة.

4. تحسينات إضافية:
   يمكنك أيضًا إضافة شروط إضافية في وظيفة validatePage() حسب احتياجاتك، مثل التحقق من أن القيمة هي رقم صحيح إيجابي.

باستخدام هذه الإضافات، يمكن للمستخدمين الآن إدخال رقم الصفحة المطلوبة في حقل الإدخال، وسيتم التحقق من صحة القيمة والانتقال إلى الصفحة المحددة بناءً على السلوك الذي قمت بتخصيصه في وظيفة goToPage() في وحدة التحكم.