mirror of
https://github.com/sosedoff/pgweb.git
synced 2024-12-14 19:21:46 +03:00
Implement pagination and simple filtering
This commit is contained in:
Dan Sosedoff
parent
61523e33df
commit
38c971ab49
@ -125,9 +125,37 @@ func GetTableRows(c *gin.Context) {
|
||||
Offset: offset,
|
||||
SortColumn: c.Request.FormValue("sort_column"),
|
||||
SortOrder: c.Request.FormValue("sort_order"),
|
||||
Where: c.Request.FormValue("where"),
|
||||
}
|
||||
|
||||
res, err := DbClient.TableRows(c.Params.ByName("table"), opts)
|
||||
if err != nil {
|
||||
c.JSON(400, NewError(err))
|
||||
return
|
||||
}
|
||||
|
||||
countRes, err := DbClient.TableRowsCount(c.Params.ByName("table"), opts)
|
||||
if err != nil {
|
||||
c.JSON(400, NewError(err))
|
||||
return
|
||||
}
|
||||
|
||||
numFetch := int64(opts.Limit)
|
||||
numOffset := int64(opts.Offset)
|
||||
numRows := countRes.Rows[0][0].(int64)
|
||||
numPages := numRows / numFetch
|
||||
|
||||
if numPages*numFetch < numRows {
|
||||
numPages++
|
||||
}
|
||||
|
||||
res.Pagination = &client.Pagination{
|
||||
Rows: numRows,
|
||||
Page: (numOffset / numFetch) + 1,
|
||||
Pages: numPages,
|
||||
PerPage: numFetch,
|
||||
}
|
||||
|
||||
serveResult(res, err, c)
|
||||
}
|
||||
|
||||
|
||||
@ -47,7 +47,7 @@ func parseIntFormValue(c *gin.Context, name string, defValue int) (int, error) {
|
||||
return defValue, fmt.Errorf("%s must be a number", name)
|
||||
}
|
||||
|
||||
if num < 1 {
|
||||
if num < 1 && defValue != 0 {
|
||||
return defValue, fmt.Errorf("%s must be greated than 0", name)
|
||||
}
|
||||
|
||||
|
||||
@ -21,6 +21,7 @@ type Client struct {
|
||||
|
||||
// Struct to hold table rows browsing options
|
||||
type RowsOptions struct {
|
||||
Where string // Custom filter
|
||||
Offset int // Number of rows to skip
|
||||
Limit int // Number of rows to fetch
|
||||
SortColumn string // Column to sort by
|
||||
@ -99,6 +100,10 @@ func (client *Client) Table(table string) (*Result, error) {
|
||||
func (client *Client) TableRows(table string, opts RowsOptions) (*Result, error) {
|
||||
sql := fmt.Sprintf(`SELECT * FROM "%s"`, table)
|
||||
|
||||
if opts.Where != "" {
|
||||
sql += fmt.Sprintf(" WHERE %s", opts.Where)
|
||||
}
|
||||
|
||||
if opts.SortColumn != "" {
|
||||
if opts.SortOrder == "" {
|
||||
opts.SortOrder = "ASC"
|
||||
@ -118,6 +123,16 @@ func (client *Client) TableRows(table string, opts RowsOptions) (*Result, error)
|
||||
return client.query(sql)
|
||||
}
|
||||
|
||||
func (client *Client) TableRowsCount(table string, opts RowsOptions) (*Result, error) {
|
||||
sql := fmt.Sprintf(`SELECT COUNT(1) FROM "%s"`, table)
|
||||
|
||||
if opts.Where != "" {
|
||||
sql += fmt.Sprintf(" WHERE %s", opts.Where)
|
||||
}
|
||||
|
||||
return client.query(sql)
|
||||
}
|
||||
|
||||
func (client *Client) TableInfo(table string) (*Result, error) {
|
||||
return client.query(statements.PG_TABLE_INFO, table)
|
||||
}
|
||||
|
||||
@ -11,9 +11,17 @@ import (
|
||||
|
||||
type Row []interface{}
|
||||
|
||||
type Pagination struct {
|
||||
Rows int64 `json:"rows_count"`
|
||||
Page int64 `json:"page"`
|
||||
Pages int64 `json:"pages_count"`
|
||||
PerPage int64 `json:"per_page"`
|
||||
}
|
||||
|
||||
type Result struct {
|
||||
Columns []string `json:"columns"`
|
||||
Rows []Row `json:"rows"`
|
||||
Pagination *Pagination `json:"pagination,omitempty"`
|
||||
Columns []string `json:"columns"`
|
||||
Rows []Row `json:"rows"`
|
||||
}
|
||||
|
||||
// Due to big int number limitations in javascript, numbers should be encoded
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -263,7 +263,6 @@
|
||||
border-color: #64903e;
|
||||
}
|
||||
|
||||
|
||||
#input .actions #query_progress {
|
||||
display: none;
|
||||
float: left;
|
||||
@ -300,8 +299,90 @@
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#output.full {
|
||||
#pagination {
|
||||
display: none;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
padding: 10px;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #eee;
|
||||
box-shadow: 0 1px 3px 0px #f1f1f1;
|
||||
}
|
||||
|
||||
#pagination .pager-container {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#pagination .filters {
|
||||
float: left;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#pagination .filters span {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
font-weight: bold;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
margin: 0px 8px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
#pagination .filters select {
|
||||
font-size: 12px;
|
||||
width: 100px;
|
||||
float: left;
|
||||
line-height: 30px;
|
||||
height: 30px;
|
||||
margin-right: 8px;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#pagination .filters select.column {
|
||||
width: 150px;
|
||||
}
|
||||
|
||||
#pagination .filters select.filter {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
#pagination .filters input {
|
||||
float: left;
|
||||
width: 200px;
|
||||
height: 30px;
|
||||
line-height: 30px;
|
||||
margin-right: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#pagination .filters .btn-primary {
|
||||
border-color: #7eb54e;
|
||||
color: #7eb54e;
|
||||
background: #fff;
|
||||
outline: none;
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
#pagination .filters .btn-default {
|
||||
float: left;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
#pagination .btn-group {
|
||||
float: right;
|
||||
}
|
||||
|
||||
#pagination .current-page {
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
margin-right: 12px;
|
||||
color: #999;
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#results {
|
||||
@ -394,6 +475,20 @@
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.full #output {
|
||||
top: 0px !important;
|
||||
}
|
||||
|
||||
.with-pagination #output {
|
||||
top: 50px !important;
|
||||
}
|
||||
|
||||
.with-pagination #pagination {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* -------------------------------------------------------------------------- */
|
||||
|
||||
#custom_query {
|
||||
height: 193px;
|
||||
margin-top: 12px;
|
||||
|
||||
@ -75,6 +75,35 @@
|
||||
<table id="results" class="table"></table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pagination">
|
||||
<form class="filters" action="#" id="rows_filter">
|
||||
<span>Search</span>
|
||||
<select class="column form-control"></select>
|
||||
<select class="filter form-control">
|
||||
<option value="equal">=</option>
|
||||
<option value="not_equal">≠</option>
|
||||
<option value="greater">></option>
|
||||
<option value-"greater_eq">≥</option>
|
||||
<option value="less"><</option>
|
||||
<option value="less_eq">≤</option>
|
||||
<option value="like">LIKE</option>
|
||||
<option value="ilike">ILIKE</option>
|
||||
<option value="null">IS NULL</option>
|
||||
<option value="not_null">NOT NULL</option>
|
||||
</select>
|
||||
<input type="text" class="form-control" placeholder="Search query" />
|
||||
<button class="btn btn-primary btn-sm apply-filters" type="submit">Apply</button>
|
||||
<button class="btn btn-default btn-sm reset-filters"><i class="fa fa-times"></i></button>
|
||||
</form>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default btn-sm prev-page" disabled="disabled"><i class="fa fa-angle-left"></i></button>
|
||||
<button type="button" class="btn btn-default btn-sm page change-limit" title="Click to change row limit"></button>
|
||||
<button type="button" class="btn btn-default btn-sm next-page"><i class="fa fa-angle-right"></i></button>
|
||||
</div>
|
||||
<div class="current-page" data-page="1" data-pages="1">
|
||||
<span id="total_records"></span> rows
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
221
static/js/app.js
221
static/js/app.js
@ -1,6 +1,45 @@
|
||||
var editor;
|
||||
var connected = false;
|
||||
var bookmarks = {};
|
||||
var default_rows_limit = 100;
|
||||
|
||||
var filterOptions = {
|
||||
"equal": "= 'DATA'",
|
||||
"not_equal": "!= 'DATA'",
|
||||
"greater": "> 'DATA'" ,
|
||||
"greater_eq": ">= 'DATA'",
|
||||
"less": "< 'DATA'",
|
||||
"less_eq": "<= 'DATA'",
|
||||
"like": "LIKE 'DATA'",
|
||||
"ilike": "ILIKE 'DATA'",
|
||||
"null": "IS NULL",
|
||||
"not_null": "IS NOT NULL"
|
||||
};
|
||||
|
||||
function setRowsLimit(num) {
|
||||
localStorage.setItem("rows_limit", num);
|
||||
}
|
||||
|
||||
function getRowsLimit() {
|
||||
return parseInt(localStorage.getItem("rows_limit") || default_rows_limit);
|
||||
}
|
||||
|
||||
function getPaginationOffset() {
|
||||
var page = $(".current-page").data("page");
|
||||
var limit = getRowsLimit();
|
||||
return (page - 1) * limit;
|
||||
}
|
||||
|
||||
function getPagesCount(rowsCount) {
|
||||
var limit = getRowsLimit();
|
||||
var num = parseInt(rowsCount / limit);
|
||||
|
||||
if ((num * limit) < rowsCount) {
|
||||
num++;
|
||||
}
|
||||
|
||||
return num;
|
||||
}
|
||||
|
||||
function apiCall(method, path, params, cb) {
|
||||
$.ajax({
|
||||
@ -180,7 +219,7 @@ function showQueryHistory() {
|
||||
|
||||
setCurrentTab("table_history");
|
||||
$("#input").hide();
|
||||
$("#output").addClass("full");
|
||||
$("#body").prop("class", "full");
|
||||
$("#results").addClass("no-crop");
|
||||
});
|
||||
}
|
||||
@ -198,7 +237,7 @@ function showTableIndexes() {
|
||||
buildTable(data);
|
||||
|
||||
$("#input").hide();
|
||||
$("#output").addClass("full");
|
||||
$("#body").prop("class", "full");
|
||||
$("#results").addClass("no-crop");
|
||||
});
|
||||
}
|
||||
@ -216,7 +255,7 @@ function showTableConstraints() {
|
||||
buildTable(data);
|
||||
|
||||
$("#input").hide();
|
||||
$("#output").addClass("full");
|
||||
$("#body").prop("class", "full");
|
||||
$("#results").addClass("no-crop");
|
||||
});
|
||||
}
|
||||
@ -237,6 +276,39 @@ function showTableInfo() {
|
||||
$("#table_rows_count").text(data.rows_count);
|
||||
$("#table_encoding").text("Unknown");
|
||||
});
|
||||
|
||||
buildTableFilters(name);
|
||||
}
|
||||
|
||||
function updatePaginator(pagination) {
|
||||
if (!pagination) {
|
||||
$(".current-page").data("page", 1).data("pages", 1);
|
||||
$("button.page").text("1 of 1");
|
||||
$(".prev-page, .next-page").prop("disabled", "disabled");
|
||||
return;
|
||||
}
|
||||
|
||||
$(".current-page").
|
||||
data("page", pagination.page).
|
||||
data("pages", pagination.pages_count);
|
||||
|
||||
if (pagination.page > 1) {
|
||||
$(".prev-page").prop("disabled", "");
|
||||
}
|
||||
else {
|
||||
$(".prev-page").prop("disabled", "disabled");
|
||||
}
|
||||
|
||||
if (pagination.pages_count > 1 && pagination.page < pagination.pages_count) {
|
||||
$(".next-page").prop("disabled", "");
|
||||
}
|
||||
else {
|
||||
$(".next-page").prop("disabled", "disabled");
|
||||
}
|
||||
|
||||
$("#total_records").text(pagination.rows_count);
|
||||
if (pagination.pages_count == 0) pagination.pages_count = 1;
|
||||
$("button.page").text(pagination.page + " of " + pagination.pages_count);
|
||||
}
|
||||
|
||||
function showTableContent(sortColumn, sortOrder) {
|
||||
@ -247,13 +319,37 @@ function showTableContent(sortColumn, sortOrder) {
|
||||
return;
|
||||
}
|
||||
|
||||
getTableRows(name, { limit: 100, sort_column: sortColumn, sort_order: sortOrder }, function(data) {
|
||||
buildTable(data, sortColumn, sortOrder);
|
||||
setCurrentTab("table_content");
|
||||
var opts = {
|
||||
limit: getRowsLimit(),
|
||||
offset: getPaginationOffset(),
|
||||
sort_column: sortColumn,
|
||||
sort_order: sortOrder
|
||||
};
|
||||
|
||||
var filter = {
|
||||
column: $(".filters select.column").val(),
|
||||
op: $(".filters select.filter").val(),
|
||||
input: $(".filters input").val()
|
||||
};
|
||||
|
||||
// Apply filtering only if column is selected
|
||||
if (filter.column && filter.op) {
|
||||
var where = [
|
||||
filter.column,
|
||||
filterOptions[filter.op].replace("DATA", filter.input)
|
||||
].join(" ");
|
||||
|
||||
opts["where"] = where;
|
||||
}
|
||||
|
||||
getTableRows(name, opts, function(data) {
|
||||
$("#results").attr("data-mode", "browse");
|
||||
$("#input").hide();
|
||||
$("#output").addClass("full");
|
||||
$("#body").prop("class", "with-pagination");
|
||||
|
||||
buildTable(data, sortColumn, sortOrder);
|
||||
setCurrentTab("table_content");
|
||||
updatePaginator(data.pagination);
|
||||
});
|
||||
}
|
||||
|
||||
@ -265,12 +361,13 @@ function showTableStructure() {
|
||||
return;
|
||||
}
|
||||
|
||||
getTableStructure(name, function(data) {
|
||||
setCurrentTab("table_structure");
|
||||
buildTable(data);
|
||||
setCurrentTab("table_structure");
|
||||
|
||||
$("#input").hide();
|
||||
$("#body").prop("class", "full");
|
||||
|
||||
$("#input").hide();
|
||||
$("#output").addClass("full");
|
||||
getTableStructure(name, function(data) {
|
||||
buildTable(data);
|
||||
$("#results").addClass("no-crop");
|
||||
});
|
||||
}
|
||||
@ -280,7 +377,7 @@ function showQueryPanel() {
|
||||
editor.focus();
|
||||
|
||||
$("#input").show();
|
||||
$("#output").removeClass("full");
|
||||
$("#body").prop("class", "")
|
||||
}
|
||||
|
||||
function showConnectionPanel() {
|
||||
@ -299,7 +396,7 @@ function showConnectionPanel() {
|
||||
});
|
||||
|
||||
$("#input").hide();
|
||||
$("#output").addClass("full");
|
||||
$("#body").addClass("full");
|
||||
});
|
||||
}
|
||||
|
||||
@ -309,7 +406,7 @@ function showActivityPanel() {
|
||||
apiCall("get", "/activity", {}, function(data) {
|
||||
buildTable(data);
|
||||
$("#input").hide();
|
||||
$("#output").addClass("full");
|
||||
$("#body").addClass("full");
|
||||
});
|
||||
}
|
||||
|
||||
@ -333,7 +430,7 @@ function runQuery() {
|
||||
$("#run, #explain, #csv, #json, #xml").prop("disabled", false);
|
||||
$("#query_progress").hide();
|
||||
$("#input").show();
|
||||
$("#output").removeClass("full");
|
||||
$("#body").removeClass("full");
|
||||
|
||||
if (query.toLowerCase().indexOf("explain") != -1) {
|
||||
$("#results").addClass("no-crop");
|
||||
@ -369,7 +466,7 @@ function runExplain() {
|
||||
$("#run, #explain, #csv, #json, #xml").prop("disabled", false);
|
||||
$("#query_progress").hide();
|
||||
$("#input").show();
|
||||
$("#output").removeClass("full");
|
||||
$("#body").removeClass("full");
|
||||
$("#results").addClass("no-crop");
|
||||
});
|
||||
}
|
||||
@ -388,6 +485,21 @@ function exportTo(format) {
|
||||
win.focus();
|
||||
}
|
||||
|
||||
function buildTableFilters(name) {
|
||||
getTableStructure(name, function(data) {
|
||||
if (data.rows.length == 0) {
|
||||
$("#pagination .filters").hide();
|
||||
}
|
||||
|
||||
$("#pagination select.column").html("<option value='' selected>Select column</option>");
|
||||
|
||||
for (row of data.rows) {
|
||||
var el = $("<option/>").attr("value", row[0]).text(row[0]);
|
||||
$("#pagination select.column").append(el);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function initEditor() {
|
||||
var writeQueryTimeout = null;
|
||||
editor = ace.edit("custom_query");
|
||||
@ -586,6 +698,7 @@ $(document).ready(function() {
|
||||
$("#sequences li.selected").removeClass("selected");
|
||||
$(this).addClass("selected");
|
||||
$("#tables").attr("data-current", $.trim($(this).text()));
|
||||
$(".current-page").data("page", 1);
|
||||
|
||||
showTableContent();
|
||||
showTableInfo();
|
||||
@ -618,6 +731,80 @@ $(document).ready(function() {
|
||||
loadSequences();
|
||||
});
|
||||
|
||||
$("#rows_filter").on("submit", function(e) {
|
||||
e.preventDefault();
|
||||
$(".current-page").data("page", 1);
|
||||
|
||||
var column = $(this).find("select.column").val();
|
||||
var filter = $(this).find("select.filter").val();
|
||||
var query = $.trim($(this).find("input").val());
|
||||
|
||||
if (filterOptions[filter].indexOf("DATA") > 0 && query == "") {
|
||||
alert("Please specify filter query");
|
||||
return
|
||||
}
|
||||
|
||||
showTableContent();
|
||||
});
|
||||
|
||||
$(".change-limit").on("click", function() {
|
||||
var limit = prompt("Please specify a new rows limit", getRowsLimit());
|
||||
|
||||
if (limit && limit >= 1) {
|
||||
$(".current-page").data("page", 1);
|
||||
setRowsLimit(limit);
|
||||
showTableContent();
|
||||
}
|
||||
});
|
||||
|
||||
$("select.filter").on("change", function(e) {
|
||||
var val = $(this).val();
|
||||
|
||||
if (["null", "not_null"].indexOf(val) >= 0) {
|
||||
$(".filters input").hide().val("");
|
||||
}
|
||||
else {
|
||||
$(".filters input.text").show();
|
||||
}
|
||||
});
|
||||
|
||||
$("button.reset-filters").on("click", function() {
|
||||
$(".filters select, .filters input").val("");
|
||||
showTableContent();
|
||||
});
|
||||
|
||||
$("#pagination .next-page").on("click", function() {
|
||||
var current = $(".current-page").data("page");
|
||||
var total = $(".current-page").data("pages");
|
||||
|
||||
if (total > current) {
|
||||
$(".current-page").data("page", current + 1);
|
||||
showTableContent();
|
||||
|
||||
if (current + 1 == total) {
|
||||
$(this).prop("disabled", "disabled");
|
||||
}
|
||||
}
|
||||
|
||||
if (current > 1) {
|
||||
$(".prev-page").prop("disabled", "");
|
||||
}
|
||||
});
|
||||
|
||||
$("#pagination .prev-page").on("click", function() {
|
||||
var current = $(".current-page").data("page");
|
||||
|
||||
if (current > 1) {
|
||||
$(".current-page").data("page", current - 1);
|
||||
$(".next-page").prop("disabled", "");
|
||||
showTableContent();
|
||||
}
|
||||
|
||||
if (current == 1) {
|
||||
$(this).prop("disabled", "disabled");
|
||||
}
|
||||
});
|
||||
|
||||
$("#edit_connection").on("click", function() {
|
||||
if (connected) {
|
||||
$("#close_connection_window").show();
|
||||
|
||||
Loading…
Reference in New Issue
Block a user