[MVC]bootstrap-table表格ajax获取json数据并分页(付源码)

html:




    
    
    
    
    
    
    
    
    
    


    

ajax:

using System.Collections.Generic;
using System.Linq;
using System.Web.Mvc;

namespace bootstrap_table_mvc.Controllers
{
    public class AjaxController : Controller
    {
        // GET: Ajax
        public ActionResult GetData(int limit, int offset)
        {
            //此处应从数据库中取得数据:
            var data = new List(){
                new MyClass{id=0, name="test0", price="$0"},
                new MyClass{id=1, name="test1", price="$1"},
                new MyClass{id=2, name="test2", price="$2"},
                new MyClass{id=3, name="test3",price="$3" },
                new MyClass{id=4, name="test5",price="$4" },
                new MyClass{id=5, name="test5",price="$5" },
                new MyClass{id=6, name="test6",price="$6" },
                new MyClass{id=7, name="test7",price="$7" },
                new MyClass{id=8, name="test8",price="$8" },
                new MyClass{id=9, name="test9",price="$9" },
                new MyClass{id=10, name="test10",price="$10" },
                new MyClass{id=11, name="test11",price="$11" },
                new MyClass{id=12, name="test12",price="$12" },
                new MyClass{id=13, name="test13",price="$13" },
                new MyClass{id=14, name="test14",price="$14" },
                new MyClass{id=15, name="test15",price="$15" },
                new MyClass{id=16, name="test16",price="$16" },
                new MyClass{id=17, name="test17",price="$17" },
                new MyClass{id=18, name="test18",price="$18" },
                new MyClass{id=19, name="test19",price="$19" },
                new MyClass{id=20, name="test20",price="$20" },
                new MyClass{id=21, name="test21",price="$21" },
            };
            var total = data.Count;
            var rows = data.Skip(offset).Take(limit).ToList();
            return Json(new { total = total, rows = rows }, JsonRequestBehavior.AllowGet);
        }
        public class MyClass
        {
            public int id { get; set; }
            public string name { get; set; }
            public string price { get; set; }
        }
    }
}

json:

{
	"total": "16",
	"rows": [{
		"id": 0,
		"name": "test0",
		"price": "$0"
	}, {
		"id": 1,
		"name": "test1",
		"price": "$1"
	}, {
		"id": 2,
		"name": "test2",
		"price": "$2"
	}, {
		"id": 3,
		"name": "test3",
		"price": "$3"
	}, {
		"id": 4,
		"name": "test5",
		"price": "$4"
	}, {
		"id": 5,
		"name": "test5",
		"price": "$5"
	}, {
		"id": 6,
		"name": "test6",
		"price": "$6"
	}, {
		"id": 7,
		"name": "test7",
		"price": "$7"
	}, {
		"id": 8,
		"name": "test8",
		"price": "$8"
	}, {
		"id": 9,
		"name": "test9",
		"price": "$9"
	}]
}

效果预览:

[MVC]bootstrap-table表格ajax获取json数据并分页(付源码)_第1张图片

源码下载:https://download.csdn.net/download/djk8888/10295919

你可能感兴趣的:(html,ASP.NET代码,JS代码)