Membuat Pagenation Pada DataGridView Menggunakan BindingNavigator Di VB.NET

Menampikan data yang terlalu besar akan menjadi masalah jika kita mencoba menampilkan keseluruhan datanya sekaligus. Ini disebabkan karena akan memakan memori yang besar dan proses looping yang terlalu banyak, sehingga waktu yang dibutuhkan untuk menampilkan data tersebut cukup lama. Bayangkan jika kita memiliki lebih dari 1 juta baris data dalam database yang kemudian kita ingin tampilkan ke dalam datagridview, tentu kita akan merasakan prosesnya lumayan lama. Solusinya adalah dengan membagi data tersebut menjadi beberapa bagian atau halaman yang pada setiap halaman kita batasi dengan jumlah baris data yang sedikit, istilah kerennya pagenation atau paging.

Pada artikel kali ini, kita akan belajar membuat pagenation pada DataGridView menggunakan BindingNavigator seperti gambar berikut.

Kita langsung ke tutorialnya saja.

Silahkan kalian download desain form yang sudah saya buat, lewat link berikut Desain Form PageNation. Kemudian kalian bisa extract file zip yang sudah didownload tadi, dan kalian akan mendapatkan tiga file berikut.

Selanjutnya kita import file tadi ke project kita dengan cara. Di bagian Solution Explorer pilih vbproject kalian kemudian klik kanan dan pilih Add - Existing Item. Atau kalian juga bisa menggunakan shortcut keyboard dengan cara menekan Shift + Alt + A.

Kemudian kalian cari file yang sudah di extract tadi dan pilih hanya FormUsersData.vb dan klik Add. Secara otomatis 2 file lainnya juga akan ikut terimport.
Jika desain tadi sudah berhasil di import, selanjutnya kita masuk ke tahap pengcodingan.

Buat Module SqlHelper yang sudah pernah kita buat di artikel Membuat Module Sql Helper VB.NET.
Pada FormUserData silahkan tekan F7 untuk beraril ke View Code. Buat sebuah variable BindingSource seperti berikut.
```
Imports System.IO
Public Class FormUsersData
    Dim bs As New BindingSource
End Class
```
BindingSource digunakan untuk membinding data ke dalam BindingNavigator, yang nantinya kita akan menggunakan event hanlder PositionChanged untuk menentukan posisi halaman dari database yang telah di bagi.

Buat sebuah methode dengan nama showDataGridView untuk menampilkan data kedalam DataGridView. Syntaxnya sebagai berikut

Public Sub showDataGridView()
        Dim query As String = "select * from users where nama like '%" & TextBoxSearch.Text & "%' order by id desc OFFSET " & bs.Position & " ROWS FETCH NEXT " & ComboBoxEntries.Text & " ROWS ONLY;"
        dgv.DataSource = getDataSet(query).Tables(0)
        dgv.AllowUserToAddRows = False
        LabelJumlahBaris.Text = "Jumlah Baris : " & dgv.RowCount
End Sub

Dibagian query silahkan kalian ganti dengan nama table dan nama kolom kalian sendiri, di Sql Sever kita menggunakan fungsi FETCH NEXT {jumlahrow} ROW ONLY, untuk menlimit berbeda halnya dengan query MySql.

Buat sebuah methode dengan nama ShowNavPageData() yang akan kita gunakan untuk menentukan jumlah dan posisi halaman pada data yang akan di tampilkan. Syntaxnya sebagai berikut.

Sub ShowNavPageData()
        dgv.DataSource = Nothing
        Dim query As String = "select top (select convert(int, ceiliNG(count(*)/ (convert(float," & ComboBoxEntries.Text & ")))) from Users  where nama like '%" & TextBoxSearch.Text & "%' ) '-' from Users"
        bs.DataSource = getDataSet(query).Tables(0)
        BindingNavigatorPaging.BindingSource = bs
        If bs.Position >= 0 Then
            showDataGridView()
        End If
 End Sub

Sebenarnya kita tidak mengambil data apapun menggunakan query di atas, kita hanya butuh baris data dengan jumlah baris yang sudah di bagi perentri data, untuk mengisi data pada BindingNavigator kita. So itu hanya sebuah trik query saja.

Terakhir kita bikin method even listenernya
handle BindingSource_PositionChanged, ComboBox_KeyPress, ComboBox_SelectedIndexChanged, TextBox_TextChanged dan Form_Load. Syntaxnya sebagai berikut.

Private Sub BindingSource_PositionChanged(sender As Object, e As EventArgs)
        'Untuk menentukan posisi part/page data yang akan di tampilkan
        If bs.Count > 0 Then
            showDataGridView()
        End If
    End Sub

    Private Sub ComboBox_KeyPress(sender As Object, e As KeyPressEventArgs) Handles ComboBoxEntries.KeyPress
        ' Agar combobox menjadi readonly
        e.Handled = True
    End Sub

    Private Sub ComboBox_SelectedIndexChanged(sender As Object, e As EventArgs) Handles ComboBoxEntries.SelectedValueChanged
        'Untuk mengganti jumlah baris data yang ingin di tampilkan
        If Me.Visible Then
            ShowNavPageData()
        End If
    End Sub

    Private Sub TextBoxSearch_TextChanged(sender As Object, e As EventArgs) Handles TextBoxSearch.TextChanged
        'Untuk texboxt pencarian data berdasarkan kolom tertentu
        ShowNavPageData()
    End Sub
    Private Sub FormMaxxisEmployee_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        'Mengkonfigurasi koneksi database
        setConnection("DATA SOURCE=USER\SQLEXPRESS;INITIAL CATALOG=MYAPP; USER ID=sa; PASSWORD=123")
        'Cara men add methode event handler yang sudah kita buat diatas ke BindingSource kita
        AddHandler bs.PositionChanged, AddressOf BindingSource_PositionChanged
        ShowNavPageData()
    End Sub

Sekarang tinggal kita percantik tampilan datagridviewnya dengan mengatur beberapa propertiesnya, caranya bisa kalian baca di artikel cara mendesain datagridview seperti tabel bootstrap.

Sekian dulu tutorial cara membuat pagenation pada datagridview menggunakan bindingnavigator. Jangan lupa di share jika kalian merasa artikel ini bermanfaat, dan jangan lupa tinggalkan jejak dengan berkomentar dibawah ini. File projectnya bisa kalian download di sini.