SelectPage

https://terryz.github.io/docs-jq/select-page
Admin
SelectPage is a jQuery plugin that provides customizable selection controls with support for AJAX...
Tokens:4,798
Snippets:36
Trust Score:9.7
Update:1 month ago
Show doc for...
Tokens:
Raw
### Server-side pagination controller (JFinal)

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Example of a JFinal controller method handling paginated data requests with search filters. Ensure the 'searchField' matches the server-side parameter name to avoid missing fuzzy search results.

```java
public void loadUserList(){
    StringBuilder sb = new StringBuilder();
    List<Object> params = new ArrayList<Object>();
    if(StringUtils.isNotEmpty(getPara("userName"))){//user name
        sb.append(" and name like ?");
        params.add("%" + getPara("userName") + "%");
    }
    if(StringUtils.isNotEmpty(getPara("userSex"))){//user sex
        sb.append(" and sex = ?");
        params.add(getPara("userSex"));
    }
    if(StringUtils.isNotEmpty(getPara("userStatus"))){//user status
        sb.append(" and status = ?");
        params.add(getPara("userStatus"));
    }
    //search selected item data
    if(StringUtils.isNotEmpty(getPara("searchKey")) && StringUtils.isNotEmpty(getPara("searchValue"))){
        String value = getPara("searchValue");
        String[] valuearr = value.split(",");
        String searchStr = "";
        for(String val : valuearr){
            if(searchStr.length() != 0) searchStr += ",";
            searchStr += "?";
            params.add(val);
        }
        sb.append(" and " + getPara("searchKey") + " in (" + searchStr + ")" );
    }
    this.getPageInfo();
    Page<Record> plist = Db.paginate(this.getPage(),
                                    this.getPageSize(),
                                    "select *","from user where 1=1 " + sb.toString(),
                                    params.toArray()); 
    this.setAttr("userList", plist);
    renderJsp("/userMain.jsp");
}
```

--------------------------------

### Basic Initialization and State Management

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Demonstrates how to initialize the plugin with data, retrieve selected text, clear selections, update values, and toggle the enabled/disabled state.

```javascript
//Input element
<input type="text" id="selectPage" >
//defined data list, same format for server side
//Array[{Object},{...}]
var tag_data = [
  {id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},
  {id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},
  {id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},
  {id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}
];
//basic initialization
$('#selectPage').selectPage({
  showField : 'desc',
  keyField : 'id',
  data : tag_data
});
//get selected item text
$('#func1').click(function(){
  alert($('#selectPage').selectPageText());
});
//clear selected item
$('#func2').click(function(){
  $('#selectPage').selectPageClear();
});
//chnage selected item and refresh item
$('#func3').click(function(){
  $('#selectPage').val('20');
  $('#selectPage').selectPageRefresh();
});
//enabled and disabled plugin
$('#funcDisabled').click(function(){
    if($('#selectPage').selectPageDisabled())//get state
        $('#selectPage').selectPageDisabled(false);
    else
        $('#selectPage').selectPageDisabled(true);
});
```

--------------------------------

### Initialization with Pre-selected Items and Sorting

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Shows how to pre-select items using attributes and configure sorting behavior for the dropdown list.

```javascript
//There are 2 ways to initialize selected item, set 'data-init' attribute or 'value' attribute
//The setting content corresponding to 'keyField' option
<div class="row">
  <div class="pull-right col-md-6">
    <input type="text" id="selectPage1" data-init="4" class="form-control" >
  </div>
</div>
$('#selectPage').selectPage({
    showField : 'desc',
    keyField : 'id',
    data : tag_data,
    //multiple keywords relationship 'OR', 'AND'
    andOr : 'OR',
    //set list sort order, if specified colunm without sort type, list will sort by ascending order
    //sort field if not specified, than use 'showField' option specified column to sort
    //more than one sort column: ['id desc','name']
    //there is using 'id' column to descending order
    orderBy : ['id desc']
});
```

--------------------------------

### Configure Remote Data Source

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Set up AJAX data loading by providing a URL and handling the response with eAjaxSuccess.

```javascript
$('#selectPage5').selectPage({
  showField : 'name',
  keyField : 'id',
  data : 'http://aaa.com/load',
  params : function(){return {'name':'aa','sex':1};},
  //Ajax response data format
  //The formated data must contain 'list' (Array) and 'totalRow' (number|string) nodes
  eAjaxSuccess : function(d){
    return d ? d.values.gridResult : undefined;
  }
});
```

--------------------------------

### Initialize SelectPage with JavaScript

Source: https://terryz.github.io/docs-jq/select-page/guide.html

Define the data source as an array of objects and initialize the plugin on the target input element.

```javascript
//defined a array, the data returned at the server side is also used that format//Array[{Object},{...}]var tag_data = [  {id:1 ,name:'Chicago Bulls',desc:'芝加哥公牛'},  {id:2 ,name:'Cleveland Cavaliers',desc:'克里夫兰骑士'},  {id:3 ,name:'Detroit Pistons',desc:'底特律活塞'},  {id:4 ,name:'Indiana Pacers',desc:'印第安纳步行者'}];//init SelectPage$('#selectPage').selectPage({  showField : 'desc',  keyField : 'id',  data : tag_data});
```

--------------------------------

### selectPage(options)

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Initializes the SelectPage plugin on an input element with the provided configuration options.

```APIDOC
## selectPage(options)

### Description
Initializes the plugin on a target input element. Configuration options include data source, field mapping, and UI behavior settings.

### Parameters
- **options** (Object) - Required - Configuration object:
  - **data** (Array) - Required - The data source for the dropdown.
  - **showField** (String) - Required - The field name to display in the list.
  - **keyField** (String) - Required - The field name to use as the unique identifier.
  - **multiple** (Boolean) - Optional - Enables multiple selection mode.
  - **pagination** (Boolean) - Optional - Toggles the pagination bar.
  - **listSize** (Number) - Optional - Sets the height of the list.
  - **maxSelectLimit** (Number) - Optional - Limits the number of items that can be selected.
  - **dropButton** (Boolean) - Optional - Toggles the visibility of the dropdown arrow.
  - **formatItem** (Function) - Optional - Callback to customize the rendering of each row.
```

--------------------------------

### selectPage Initialization

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Initializes the SelectPage plugin with event callbacks for item selection and removal.

```APIDOC
## selectPage Initialization

### Description
Initializes the plugin with specific fields and event callbacks for handling user interactions.

### Parameters
- **showField** (string) - The field name to display.
- **keyField** (string) - The field name used as the unique identifier.
- **data** (array/string) - The data source or URL.
- **multiple** (boolean) - Whether multiple items can be selected.
- **eSelect** (function) - Callback triggered when an item is selected.
- **eTagRemove** (function) - Callback triggered when an item is removed.
```

--------------------------------

### Programmatic Methods

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Methods to interact with the SelectPage instance after initialization.

```APIDOC
## Programmatic Methods

### selectPageText()
Returns the text of the currently selected item.

### selectPageClear()
Clears the current selection.

### selectPageRefresh()
Refreshes the plugin instance, typically used after updating the input value programmatically.

### selectPageDisabled(state)
Gets or sets the enabled/disabled state of the plugin. 
- **state** (Boolean) - Optional - If provided, sets the enabled (false) or disabled (true) state.
```

--------------------------------

### Configure selectPage Events

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Use eSelect and eTagRemove callbacks to handle item selection and removal events.

```javascript
$('#selectPage').selectPage({
  showField : 'desc',
  keyField : 'id',
  data : tag_data,
  multiple : true,
  //selected item callback
  //data: item raw data
  eSelect : function(data){
    $('#callbackLog').append(data.desc + '(' + data.name + ')<br/>');
    },
    //removed item callback
    //data: items raw data(Array)
    eTagRemove: function(datas){
        if(datas && datas.length){
            for(var i=0;i<datas.length;i++){
                $('#callbackLog').append(datas[i].desc  + '(' + datas[i].name + ') item removed<br/>');
            }
        }
    }
});
```

--------------------------------

### Include SelectPage dependencies

Source: https://terryz.github.io/docs-jq/select-page/guide.html

Include the jQuery library, the SelectPage stylesheet, and the plugin script in your HTML file.

```html
<!-- jQuery Library include 1.10+, untest on jquery2,3 --><script type="text/javascript" src="jquery.min.js"></script><!-- include SelectPage style sheet file--><link rel="stylesheet" href="selectpage.css" type="text/css"><!-- SelectPage plugin js --><script type="text/javascript" src="selectpage.js"></script>
```

--------------------------------

### Initialize Server-Side Data Linkage

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Configures two SelectPage instances where the city selector updates based on the province selection. It uses the eSelect event to clear the dependent selector and the params function to pass the selected province ID to the server.

```javascript
var lastProvince = '';//province selector initialization$('#selectPageProvince').selectPage({    showField: 'name',    keyField: 'id',    data: 'http://aaa.com/loadProvince',    //when clear province, clear the city at the same time    eSelect: function (data) {        if(data && lastProvince !== data.id){            $('#selectPageCity').selectPageClear();        }    }});//city selector initialization, use empty data$('#selectPageCity').selectPage({    showField: 'name',    keyField: 'id',    data: 'http://aaa.com/loadCity',    //send selected province to server side    //send -1 to return empty list (server side need to catch and return empty list)    params: function(){        var pv = $('#selectPageProvince').val();        return {'province': pv?pv:'-1'};    }});
```

--------------------------------

### Remote Data Source Configuration

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Configures the plugin to fetch data from a remote URL and handle the AJAX response.

```APIDOC
## Remote Data Source Configuration

### Description
Configures the plugin to use an AJAX endpoint for data retrieval and defines how to process the response.

### Parameters
- **data** (string) - The URL for the remote data source.
- **params** (function) - Returns an object containing additional parameters to send to the server.
- **eAjaxSuccess** (function) - Callback to format or extract the data from the AJAX response.
```

--------------------------------

### Integrate SelectPage with SelectMenu and bDialog

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Demonstrates linking a SelectPage input with a SelectMenu button, using bDialog for alerts and validation. The SelectMenu data source is filtered dynamically based on the SelectPage value.

```javascript
//html<div class="row">    <div class="col-md-3">        <input type="text" id="selectPageProvince1" class="form-control" placeholder="Select Area" >    </div>    <div class="col-md-3">        <button type="button" class="btn btn-default" id="selectMenuCity">            Select Team <i class="fa fa-caret-down"></i>        </button>    </div></div>//javascript//init SelectPage$('#selectPageProvince1').selectPage({    showField: 'name',    keyField: 'id',    data: province,    eClear: function(){        $('#selectMenuCity').selectMenuClear();    }});//init SelectMenu, using dynamic data source$('#selectMenuCity').click(function(){    var pv = $('#selectPageProvince1');    if(!pv.val()) bDialog.alert('Please select a province!');    else{        $(this).selectMenu({            showField : 'name',            keyField : 'id',            data : function(){                var arr = new Array();                $.each(city, function(i,row){                    if(row.pId === pv.val()) arr.push(row);                });                return arr;            },            eSelect: function(data){                if(data.length)                    bDialog.alert('You choice <b>'+pv.selectPageText()+                        '</b> province <b>'+data[0].name+'</b> city!');            }        });    }});
```

--------------------------------

### Define HTML input element

Source: https://terryz.github.io/docs-jq/select-page/guide.html

Create an input element to serve as the target for the SelectPage initialization.

```html
<!-- Set input element for init --><input type="text" id="selectPage" >
```

--------------------------------

### Selection Limit Configuration

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Limits the number of items that can be selected and controls whether the list closes after a selection is made.

```javascript
$('#selectPage').selectPage({
  showField : 'desc',
  keyField : 'id',
  data : tag_data,
  multiple : true,
  maxSelectLimit : 3,
  //close list after item picked, default: false
  selectToCloseList : false
});
```

--------------------------------

### Implement data linkage

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Configure dependent selectors where selecting an item in one triggers an update to the data source of another.

```javascript
//defined province and city data for demo
var province = [
    {id:'001',name:'广东'},
    {id:'002',name:'福建'},
    {id:'003',name:'河北'},
    {id:'004',name:'江苏'},
    {id:'005',name:'浙江'}
];
var city = [
    {id:'001',pId:'001',name:'广州'},
    {id:'002',pId:'001',name:'深圳'},
    {id:'003',pId:'002',name:'福州'},
    {id:'004',pId:'002',name:'厦门'},
    {id:'005',pId:'003',name:'石家庄'},
    {id:'006',pId:'003',name:'保定'},
    {id:'007',pId:'004',name:'南京'},
    {id:'008',pId:'004',name:'无锡'},
    {id:'009',pId:'005',name:'杭州'},
    {id:'010',pId:'005',name:'温州'}
];
//province selector initialization
$('#selectPageProvince').selectPage({
    showField: 'name',
    keyField: 'id',
    data: province,
    eSelect: function (data) {
        if(data){
            var arr = new Array();
            $.each(city, function(i,row){
                if(row.pId === data.id) arr.push(row);
            });
            //update city data
            if(arr.length) $('#selectPageCity').selectPageData(arr);
        }
    },
    eClear: function(){//when clear province, clear the city at the same time
        $('#selectPageCity').selectPageClear();
        $('#selectPageCity').selectPageData([]);
    }
});
//initialization city selector, use empty data
$('#selectPageCity').selectPage({
    showField: 'name',
    keyField: 'id',
    data: []
});
```

--------------------------------

### Readonly Mode and List Configuration

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Configures the plugin for select-only mode, disables pagination, and adjusts the list height.

```javascript
$('#selectPageSelectOnly').selectPage({
    showField : 'name',
    keyField : 'id',
    data : tag_data,
    selectOnly : true,
    //close pagination bar
    pagination : false,
    //the height of list, default: 10
    listSize : 15,
    multiple : true
});
```

--------------------------------

### Expected Server-Side JSON Format

Source: https://terryz.github.io/docs-jq/select-page/demo.html

The server must return a structure containing 'list' and 'totalRow' nodes, or use eAjaxSuccess to map the response.

```json
//The server side return data format
//In example, some nodes are not required, but 'list' and 'totalRow' are required
//So in the previous example, set 'eAjaxSuccess' callback and return 'values.gridResult' node
//Because there is no 'list' and 'totalRow' node in data root node
{
    "values": {
        "gridResult": {
            "pageSize": 10,
            "pageNumber": 1,
            "totalRow": 11,
            "totalPage": 2,
            "list": [
                {"name": "计算机网络", "id": "1"},
                {"name": "计算机网络1", "id": "2"},
                {...}
            ]
        }
    }
}
```

--------------------------------

### Multiple Selection Mode

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Enables multiple selection mode, allowing users to select multiple items displayed as tags.

```javascript
<input type="text" id="selectPage" class="form-control" value="7,2,3" >
$('#selectPage').selectPage({
  showField : 'desc',
  keyField : 'id',
  data : tag_data,
  //open multiple selection mode
  multiple : true
});
```

--------------------------------

### Custom Row Rendering and UI Controls

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Customizes the display of items in the list and hides the dropdown arrow button.

```javascript
<div class="row">
  <div class="pull-right col-md-6">
    <input type="text" id="selectPage" class="form-control" >
  </div>
</div>
$('#selectPage').selectPage({
  showField : 'desc',
  keyField : 'id',
  data : tag_data,
  pageSize : 5,
  //close down arrow button
  dropButton : false,
  //customize row content render
  formatItem : function(data){
    return data.desc + '(' + data.name + ')';
  }
});
```

--------------------------------

### Update data source dynamically

Source: https://terryz.github.io/docs-jq/select-page/demo.html

Use the selectPageData method to update the data source of an existing SelectPage instance.

```javascript
var data = [
  {id:1 ,name:'北京'},{id:2 ,name:'上海'},
  {id:3 ,name:'广州'},{id:4 ,name:'深圳'},
  {id:5 ,name:'成都'},{id:6 ,name:'重庆'},
  {id:7 ,name:'福州'},{id:8 ,name:'长沙'},
  {id:9 ,name:'西安'},{id:10,name:'浙江'}
];
$('#selectPage').selectPageData(data);
```
Tokens:
Raw