server-side pagination with EasyUI (easyui-pagination)

<div class="easyui-panel">

    <table id="dg" title="Customer Profile" class="easyui-datagrid" style="width:100%;height:350px"
           url="CustomerProfile/LoadAllCustomers"
           toolbar="#toolbar" pagination="FALSE"
           rownumbers="true" fitcolumns="true" singleselect="true">
        <thead>
            <tr>
                <th data-options="field:'Id',hidden:true">ID</th>
                <th data-options="field:'CardNo'">Card No</th>               
                <th data-options="field:'FullName'">Full Name</th>
                <th data-options="field:'Gender'">Gender</th>
                <th data-options="field:'Email'">Email</th>
                <th data-options="field:'Mobile'">Mobile</th>               
                <th data-options="field:'Address'">Address</th>
                <th data-options="field:'MariatialStatus'">Mariatial Status</th>
                <th data-options="field:'DOB',formatter:function(value){
     var d = new Date(value);
     return $.fn.datebox.defaults.formatter(d);
   }">Date of Birth</th>

            </tr>
        </thead>
    </table>
    <div id="pp" class="easyui-pagination" ></div>
</div>

var url;
$.ajax({
    type: "get",
    url: 'CustomerProfile/GetTotalCustomer',
    dataType: 'json',
    data: {   },
}).done(function (responseJson) {
    console.log(responseJson);
    $('#ShopId').combobox('setValue', 'All');
    $('#pp').pagination({
        total: responseJson.data,
        pageSize: 10,
        onSelectPage: function (pageNumber, pageSize) {
            $('#Name').val("");
            $('#dg').datagrid({
                url: 'CustomerProfile/LoadAllCustomerWithPaginaiton?pageNumber=' + pageNumber + '&pageSize=' + pageSize + '&searchText=' + $('#Name').val()

            });
        }
    });
});