<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
link
rel
=
"stylesheet"
href
=
"jqwidgets/styles/jqx.base.css"
type
=
"text/css"
/>
<
script
type
=
"text/javascript"
src
=
"scripts/jquery-1.11.1.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxcore.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxdata.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxbuttons.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxscrollbar.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxlistbox.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxdropdownlist.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jqwidgets/jqxdatatable.js"
>
</
script
>
</
head
>
<
body
>
<
center
>
<
h1
style
=
"color: green"
>
GeeksforGeeks
</
h1
>
<
h3
>jQWidgets jqxDataTable localization Property</
h3
>
<
div
id
=
"jqxdt"
></
div
>
<
br
>
<
input
type
=
"button"
style
=
"margin:29px;"
id
=
"jqxbtn"
value
=
"Click here"
/>
<
div
id
=
"log"
></
div
>
</
center
>
<
script
type
=
"text/javascript"
>
$(document).ready(function () {
var d = new Array();
var subjectNames =
["C++", "Scala", "Java","C", "R", "JavaScript"];
var pageNumber =
["7", "8", "12", "11", "10", "19"];
for (var j = 0; j <
27
; j++) {
var r = {};
r["subjectnames"] = subjectNames[
Math.floor(Math.random() * subjectNames.length)];
r["pagenumber"] = pageNumber[
Math.floor(Math.random() * pageNumber.length)];
d[j] = r;
}
var src = {
localdata: d,
datatype: "array",
};
var
gloc
=
function
() {
var locobj = {};
locobj.pagerRangeString
=
" total- "
;
return locobj;
}
var
data_Adapter
=
new
$.jqx.dataAdapter(src);
$("#jqxdt").jqxDataTable({
source: data_Adapter,
localization: gloc(),
pageable: true,
width: 320,
height: 170,
columns: [
{
text: "Subject Name",
datafield: "subjectnames",
width: "160px",
},
{
text: "Page No.",
datafield: "pagenumber",
width: "160px",
},
],
});
$("#jqxbtn").jqxButton({
width: 280
});
$("#jqxbtn").on("click", function () {
var ls = $('#jqxdt').jqxDataTable('localization');
$("#log").text(ls.pagerRangeString)
});
});
</script>
</
body
>
</
html
>